The single page site is a popular technique. Here we demonstrate a clever technique that subtly changes the background image as the page scrolls.
INSPIRATION: www.imagineourymca.ca
One of the greatest weapons in the arsenal of a web designer is the image, and we’ve come a long way since the days of placing the smallest possible picture on a screen. Now designers are using the image to lead the user experience, and coupled with the rich typography that CSS3 offers, we are witnessing the boundaries of HTML5 web sites pushed to greater success. This is evident in the Imagine our YMCA site created by Domain7. This skilfully crafted site uses jQuery to fade between background images as the site scrolls and the content on screen changes. This produces a well-designed site that really adds to the user experience.
TECHNIQUE
Transitioning with scroll
01. Create a new page
In Dreamweaver create a new HTML5 webpage and add the code to the head section. This links us to jQuery and creates the body style and the style for fixing the image container on the page.
001 <script src=”http://code.jquery.
com/jquery-1.7.2.min.js”></script>
002 <style type=”text/css”>
003 body{
004 margin: 0; height: 1800px;
005 min-height: 1800px; padding: 0;
006 }
007 imageSwap{
008 position: fixed; overflow:hidden;
009 top: 0px; left: 0px; width:100%;
010 }
011 #imageSwap.fixed {position: fixed;
top:0 px;}
02. Style the content
Here we position the images and fix the content in a div over the top of them in a semi-transparent box. This content is positioned on the page so that we have to scroll down to see the next section.
001 .one {position:absolute; z-index:1;}
.two {position:absolute; display:none;
z-index:2;}
002 .content {
003 background-color:rgba(125,0,0,0.6);
004 padding: 10px; height: 850px; width: 800px;
005 margin-right: auto; margin-left:
auto;
006 position: relative; z-index:100;
007 }
008 #first{top:50px;}
009 #second{top:350px;}
010 </style>
03. Add the HTML
In the body section of the document add the following code. Here we add the div container imageSwap which holds the images we will use in the background. We than have two content areas which are positioned above this. Finally we move into JavaScript and set up two variables to hold the page position.
001 <div id=”imageSwap”><img src=”image01.jpg” /><img src=”image02.jpg” />
002 </div>
003 <div id=”first” class=”content”>Content Area 1</div>
004 <div id=”second” class=”content”>Content Area 2</div>
005 <script language=”javascript” type=”text/javascript”>
006 var thisPos=1;
007 var lastPos=1;
04. Using jQuery
The document ready function fixes the background div and detects scrolling. If the user scrolls past 900 pixels then they are at the second div container, so we fade in the second image, while fading out the first image.
001 $(document).ready(function () {
002 $(‘#imageSwap’).addClass(‘fixed’);
003 $(window).scroll(function() {
004 var yPos = $(window).scrollTop();
005 if (yPos > 900){
006 thisPos=2;
007 if(thisPos != lastPos){
008 $(‘.one’).fadeOut(500);
009 $(‘.two’).fadeIn(500);
010 }
011 }
05. Detecting first content
Now the final code reverses the last bit. Save this document now and, assuming you have two images named image01.jpg and image02.jpg, you should have a page that changes the background depending on scrolling.
001 if (yPos <= 900){
002 thisPos=1
003 if(thisPos != lastPos){
004 $(‘.two’).fadeOut(500);
005 $(‘.one’).fadeIn(500);
006 }
007 }008 lastPos=thisPos;
009 });
010 });</script>
011 item”></a>
TECHNIQUE
Create the content background
The content background has an image with a rip down each side. This image is a semi-transparent PNG and is straightforward to create. We’re going to show the creation process using Photoshop to put the composition together.
01. Create the gradient
Create a new document 800 pixels wide by 100 high in Photoshop with a transparent background. Choose light red and dark red as the foreground and background colours. Use the gradient tool to create a gradient across the screen.
02. Fade image
Make the Opacity of the layer 50%, and then we need to search online for a rip or tear image. When you find one that’s black and white or transparent already, download it and open in Photoshop.
03. Add the rip
Select the rip using a colour selection and drag it into the gradient document. Position it at the edge and with the rip selected, choose the gradient layer and hit delete. If you turn off the rip layer you will have a ripped edge. Repeat this for the opposite side.
Leave a Comment