A Quick Way to Use Page Scrolling to Reveal an Image
From time to time you may see a website that reveals some image in the background when the user scrolls. More times than not it displays advertising. We’re going to create a super quick and easy web page that reveals an image as the user scrolls down.
What We Are Building
Here is a look at what we’ll be building. Not too fancy but it gets the job done. It gives your site a nice little Easter egg for you users to find when surfing.
Getting Started
The first thing we’re going to have to do is image work. Decide which image you want to reveal. I just found a picture of a cat on the internet. Second of all you’re going to have to create a fairly large image that goes from your background color to transparent. It needs to be large enough to cover even your largest browser. I made mine about 2000px square with a little texture in the gradation. Once you have that made, simply save it as a transparent PNG and your ready to go. The idea here is that the transparent PNG is going to sit on top of your hidden image. Your PNG is going to scroll up, but your hidden image is going to stay in place. Kind of like the curtains at a theatre.
The Code
There is not much to this. There is a single div wrapper which will have the PNG overlay as it’s background, and the body will have the hidden image as it’s background. In this tutorial I also added some text and an arrow just to show that it is scrolling.
Just a couple of notes. For this to work in IE6 your going to have to find a PNG transparency fix. There are 10 million out there, just pick one. I used the jQuery pngFix plugin. Also be sure to get rid of any margin padding on the body. You’re PNG overlay won’t go to the edges if you have this margin in place.
Here is the Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Page Title</title> <style type="text/css" media="screen"> /* Get rid of any margins*/ *{ margin:0px; padding:0px; } /* Give the body your hidden image as the background and maked sure it is FIXED*/ body{ background: #000 url(1Fail.jpg) no-repeat fixed 50% bottom; } /*Give the wrapper your overlay image as the background and make sure it SCROLLS*/ #wrapper{ /* Just making sure you can scroll...probably will not need this if you have enough content */ height:2000px; width:100%; background: transparent url(overlay.png) no-repeat scroll left top; color:white; font-family: Arial, "MS Trebuchet", sans-serif; } /* Centering and styling text/image within the wrapper */ #wrapper h1, #wrapper img{ text-align:center; width:700px; margin:0 auto; padding:100px 0px 0px; display:block; } </style> <!-- PNG FIX - NEEDED FOR IE6 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.pngFix.pack.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).pngFix(); }); </script> </head> <body> <div id="wrapper"> <!-- Regular Content --> <h1>Scroll Down to see the hidden image.</h1> <img src="arrow.gif" alt="" title="" /> </div> </body> </html> |
That’s all there is too it. Nice and quick for a pretty cool effect. Enjoy.
