I am trying to create a "porthole" using CSS. When I say porthole, what I mean is to make a portion of the screen see through so you can see whatever is behind the porthole and thats it.
I was able to get the effect I wanted by setting the background color of the body to the same as the foreground color, then using a porthole image which had a circular gradient with white in the middle and black on the edges as long as all the content on the page was all the same color. This is not exactly what I want, because I would like to use color or anything behind the screen.
I came up with this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test See Through Mouse</title>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { height: 100%; background-color: green; }
#cover { height: 100%; width: 100%; top: 0; position: fixed; background: url(porthole.png) no-repeat; }
</style>
</head>
<body>
Hi, I am behind the scenes content. Hi, I am behind the scenes content. Hi, I am behind the scenes content.
<!-- repeated enough times to fill the screen with text -->
<div id="cover"></div>
<script type="text/javascript">
$('#cover').live('mousemove', function(e) {
<!-- the image is 3000px by 3000px and I want the center of the visible part where the mouse is -->
$('#cover').css('background-position', (e.pageX - 1500) + 'px ' + (e.pageY - 1500) + 'px');
});
</script>
</body>
</html>
where the porthole image is a huge PNG image (multiple times the size of my screen in each direction) with an small circle (about 200px by 200px) of invisibility in the middle. This does give the effect I want, but the main problem is I don't know the screen size of the user, but I also don't want to use an image that is too large for the user because moving it around gets noticeably choppier as the image size grows.
Is there a way to make it so that I only need to provide a porthole image that is the size of the actual porthole graphic instead, using some other method to cloak out the rest of the screen? I am willing to use HTML (5 is ok), CSS and javascript only.