This is a little hard to describe, so view the example and be sure to scroll to the bottom of the page. The background is a gradient that fades into a simple graphic. As you scroll down the page, the graphic stays in the same fixed position at the bottom of your browser window, but the gradient reverses. As you approach the end of the page, the graphic changes colors, or reveals objects that were previously unseen.
I can‘t remember where I saw an explanation of the technique, but if I do I will provide credit. I thought it had many possibilities beyond the simple example that was shown, but with deadlines looming I had to store it away for another day. Finally, today I had some time to kill and I decided to see if I could reproduce the effect.
There are 3 images: 2 gradient blends and 1 graphic. The graphic consists of (at least) an area that is visible when viewed in the lightest color of the blend and another area that is the same color, and therefore invisible, in the lightest blend color. This area becomes visible in the darker blend colors.
I‘ve provided the files for the images, the basic HTML file and the CSS file which you can download.
The instructions below are detailed enough that Photoshop newbies can follow along.
The coding is reasonably simple, though some knowledge of HTML and CSS is assumed and FTP access to a server is needed.
If needed, you can download these instructions as a PDF.
You will need to set up a folder for this project. In it, create another folder named images.
In Photoshop, start with the blends:
- Create a new document that is 10 px wide and 500 px tall.
- Select a foreground color and a background color that will be the endpoints of the gradient. While in the Color Picker, remember the hexidecimal codes for the lighter color so that it can be referenced in the CSS.
In the example, I used #333333 for the foreground color and #d6d6d6 for the background color.
- Create a gradient blend starting with the darkest color at the top. If you are unfamiliar with the process of creating gradients, follow the sequence in the illustration to the right.
- Select a foreground color and a background color that will be the endpoints of the gradient.
- Choose the Gradient tool.
- The gradient option should default to your selected foreground and background colors. If not, click the dropdown arrow and select the correct gradient from the choices.
- Click at the top of your image and drag to the bottom. When you release, the gradient will be drawn. Repeat if you need to adjust.
- Save this gradient as a medium quality JPG using Save for Web & Devices… (under the File menu).
I used the filename bkg_33tod6.jpg with shorthand for the hex colors as a reminder and saved the file to the images folder.
- Flip the image vertically (Image > Image Rotation > Flip Canvas Vertical).
- Save the reversed gradient as above.
I used bkg_d6to33.jpg as the filename.
Now create the graphic:
- For an effective, simple example, create a new image that is about 200 px tall by 300 px wide with the Background Contents set to Transparent (refer to the first figure, above).
The exact dimensions would be influenced by the width of the main content area. The narrower the area, the graphic can be more complex, though it will repeat horizontally across the bottom window. A seamless transition is therefore important.
- Use the same foreground and background colors that you selected for the gradient. Select All (Select > Select All) and fill with the background color (Edit > Fill and Use: Foreground Color).
- Create a new layer (Layer > New > Layer…) Select All and fill with the foreground color.
- Create another new layer and place it at the top of the layer stack. Make sure the layer with darkest color is not visible by clicking on the visibility icon (eyeball) in the layers panel or by placing it at the bottom of the layer stack. Paint or draw a graphic image using the foreground drawing color.
This color will be invisible when at the bottom of the page. Colors that are lighter will still be faintly visible. In this example, only 2 colors were used. The reflection of the trees in the water will be visible at the bottom of the page while the trees will fade away.
- Create another new layer and place it on top of the layer stack. Make the layer with the darkest color visible and the other 2 layers invisible.
- Exchange the foreground and background colors (press the ‘x‘ key).
- Draw or paint the object that you want to be visible at the bottom of the page.
The trick is to avoid the dark colored areas in the layer below. To do this, CMD-click (or CNTL-click) on the Layer Thumbnail layer below to cause the filled area to be selected.
- Then, click on the layer above to make it the active layer and begin to draw or paint using the lighter drawing color. This area will be invisible until the bottom of the scroll is reached.
In the example, I drew stars in the sky, selected the sky region and copied and pasted it (to a new layer), flipped the layer vertically (Edit > Transform > Flip Vertical) and moved it into position as a reflection of the stars in the water.
- When the graphic is done, make the dark fill layer (at the bottom of the layer stack) invisible and Save for Web & Devices. Since the background needs to be transparent, choose the present for PNG-24. In this example, I named the file river_frieze.png.
Now you are ready to start coding…
- In your favorite text editor create a new file and copy the following basic HTML structure and paste it into your file (or in Dreamweaver, open a new HTML file):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>example: scrolling gradient over a fixed background</title>
</head>
<body>
</body>
</html>
- Save this file as test.html in your project folder.
- Create another new blank file for the CSS (or open a new CSS file in Dreamweaver) and save this file as style.css in your project folder.
- To link the CSS file to the HTML file, add the following to the <head> section of index.html:
<link href="style.css" rel="stylesheet" type="text/css" />
- The <body> will be styled to hold the background color. Also, there are 4 structural components, or DIVs to this page in the following heirarchy:
A container for the background gradient at the bottom of the page
A container for the graphic image
A container for the main content of your page
The main content of your page
- Inside the <body> set up the 4 DIVs:
<div id="background">
<div id="graphic">
<div id="mainContainer">
<div id="mainContent">
</div>
</div>
</div>
</div>
That‘s all that is needed for the HTML side. The rest is handled by CSS. Save index.html.
Open style.css
- For this example, the mainContainer ID, or the content of your page is 640 px wide (width: 640px; )
- It has a white background (background: #FFFFFF;)
- It is centered in the window (margin: 0 auto; )
- It also has a solid, black border around all 4 sides (border: 1px solid #000000; )
- And, because we want to see the effect after scrolling through a long page of content, the height is 2000 px (min-height: 2000px; )
The styling for this ID is:
#mainContainer {
width: 640px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
min-height: 2000px;
}
If you upload your files and test in your browser, the page should look like this:
A white rectangular area centered in the window. The scroll bar indicates that this is a long page.
- Next, style the body with the lightest color as the background (background: #d6d6d6; )
- The dark-to-light gradient (bkg_33tod6.jpg) will also appear in the background at the top of the window so add the url (background: #d6d6d6 url(images/bkg_33tod6.jpg); )
- The gradient will repeat horizontally across the width of the window (background: #d6d6d6 url(images/bkg_33tod6.jpg) repeat-x; )
- Since we want the background to extend to the edges of the window, the margins will be 0 px on all sides (margin: 0; )
The styling for the body:
body {
background: #d6d6d6 url(images/bkg_33tod6.jpg) repeat-x;
margin: 0;
}
Now if you upload and refresh, the window should look like this:
As you scroll down, the gradient disappears, leaving the solid background color.
- The background ID will only hold the light-to-dark gradient that will be anchored to the bottom and extend across the window:
#background {
background: url(images/bkg_d6to33.jpg) repeat-x left bottom;
}
Now if you upload and refresh and scroll to the bottom of the page, the window should look like this:
- Finally, add the .png image as a background image to the graphic ID and repeat image across the window (background: url(images/river_frieze.png) repeat-x; )
- To hold the graphic in position at the bottom of the window, the background-attachment style must be fixed and the background-position (Y) is set to bottom.
- There must be a slight offset to the left (for some reason), so the background-position (X) is set to -10 px.
The styling for this ID is:
#graphic {
background: url(images/river_frieze.png) repeat-x fixed -10px bottom;
}
If you upload and refresh, the graphic should appear at the bottom of the window:
And as you scroll to the bottom of the page, the reflection in the water disappears and the stars come out.
