News

Use fixed images to create a reveal effect with HTML and CSS

Keep background images fixed in position and reveal new images as the page scrolls up or down

Use fixed images to create a reveal effect

inspiration: cyclemon.com/index.html

Cyclemon is a digital experiment for illustrators Thomas Pom, a fourth-year student studying at the National School of Decorative Arts in Paris and Orthonormai, an interactive designer at OgilvyOne in Paris.

The illustrations they have created for this site are actually for sale as prints and so this site promotes those illustrations in a playful manner. The theme of the site is based around the phrase ‘You are what you ride’ so with each of the cycles illustrated there is a statement about the type of person you are likely to be. Of course this is all very tongue-in-cheek, which suits the nature of the site perfectly.

Document structure
An impressive part of the Cyclemon site is the way the page scrolls yet the bicycle remains static on the screen. As the page scrolls, the new bike is revealed. This can be replicated by setting up the following page structure of <div> tags.

001 <div id=”stage”>
 002    <div class=”block” id=”box1”></div>
 003    <div class=”block” id=”box2”></div>
 004    <div class=”block” id=”box3”></div>
 005 </div>

Style the page
Once the page structure is added, you can add the CSS. This can be done either using a separate document or by adding it to the page head. The code below is setting the page to be the full height of the browser and removing the padding and margins.

001 <style>
 002 html, body {
 003    min-height: 100%;
 004    margin: 0; padding: 0;
 005 }

Content holders
The following CSS sets the wrapping <div> with the id of ‘stage’ to ensure it fills the full width and height of the document. The overflow content is set to scroll but the position is fixed so that it doesn’t scroll at all.

001 #stage {
 002     height: 100%; width: 100%;
 003     overflow: scroll; position: fixed;
 004 }

Each section
Each section is also set to be the width and height of the stage and this is the content that will scroll inside of the ‘stage’ div. However the background image is set to fixed and remains centred in the browser, which will give the reveal.

001 .block {
 002     width: 100%; height: 100%;
 003     background-attachment: fixed;
 004     background-position: 50%;
 005     background-repeat: no-repeat;
 006     position: relative;
 007 }

Add the images
Finally, add the background images to each of the boxes. These are the bicycles that are revealed as each content section scrolls up the page. Save the document now and view in the browser to see the effect in all its glory.

001 #box1 { background-image:         url(cycle1.    png); }
 002 #box2 { background-image:         url(cycle2.    png); }
 003 #box3 { background-image:         url(cycle3.    png); }
 004 </style>    005 
×