Geek Answers Handbook

CSS viewed through the porthole

I am trying to create a porthole using CSS. When I say a porthole, I mean, to make a part of the screen visible so that you can see what is behind the porthole, and here it is.

I managed to get the effect that I wanted by setting the background color of the body the same as the foreground color, and then using the porthole image, which had a circular gradient with white in the middle and black on the edges since all the content on the page was one colors. This is not exactly what I want, because I would like to use color or something 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>

PNG ( ) ( 200 200 ) . , , , , , .

, , , - , ? HTML (5 ), CSS javascript.

+5
2

250x250, ? div, .

, , . div / 200%, , / 100% JS divs .

================
|     div      |
================
|div| port |div|
================
|     div      |
================
+3

<div> , 3 .

div, , div, , div. div. :

<--------<div>--------->

<div> hole image <div>

<--------<div>--------->

.

0

More articles:


All Articles