On my latest web project, I decided it would be cool if the background changes as the user scrolls down the page. My latest project is a simple one-page website for a short film titled "Ampon" (Adopted), a movie based from a real life story.
The theme of the website is quite emotional, but the end line should be that it could provide a positive perspective to the end user. The initial background was a desaturated photo of the protagonist boy in the story. So I thought, since it should provide optimism to the targeted end user, why not give it colors as the page scrolls down?
You can view the live working demo on this website: www.amponmovie.com
This is made possible by the jQuery .offset() method -- See: http://api.jquery.com/offset/. This method detects the location/coordinates of the elements you specified on the script. I wouldn't explain everything about this method as they are clearly elaborated on the link I provided above.
So, here's the logic. The project is a one-page website divided into different sections which can be called/put to the visible screen using HTML anchor tags.
What are anchor tags? Here's a quick demonstration:
Here's your sample navigation menu:
Home | About | News | Contact
The sample code:
<ul><li><a href="#home">Home</a>|</li>
<li><a href="#about">About</a>|</li>
<li><a href="#news">News</a>|</li>
<li><a href="#contact">Contact</a></li></ul>Here's a sample div containing the contents on your About section:
About - Lorem ipsum dolor sit amet.
The sample code:<div id="about">About - Lorem ipsum dolor sit amet.</div>
When you click your About link on the navigation menu, your page will scroll to where your div#about section is located. That's how anchor tags work.
So with the .offset() method and anchor tags, what's next?
After including the latest jQuery script on your page, you're now ready to experiment with any of the methods included on their library, this includes the .scrollTop() method (See: http://api.jquery.com/scrollTop/) which detects the vertical scroll actions on your website.
So here's the complete logic:
We have 4 sample div sections on your page. On page load, the default background is background-1 where your default div section is, let's call it div-1. When the user scrolls past the first div to the second div, div-2 OR the user clicks the anchor link that links to the second div, the background will then change to background-2. To be able to do this, we need to use two other jQuery methods called .removeClass() [See: http://api.jquery.com/removeClass/] and .addClass() [See: http://api.jquery.com/addClass/]where we assign the new background on the class incorporated with your div. E.g. class-2 for div-2. (Be reminded though that I am aware that this type of naming convention using numbers suck, but it is better understood if explained this way.)
Since we will not be needing any specific offset coordinates, we don't need any computation here. We only need to know if the user is scrolling past a specific div to another. And so we'll be using if-else if statements to determine the present active and visible div on your screen. :)
So here's the complete script for our example:
<script type="text/javascript">
jQuery(function( $ ){
var supertop = $( "#supertop" );
var div-1 = $( "#home" );
var div-2 = $( "#about" );
var div-3 = $( "#news" );
var div-4 = $( "#contact" );
var supertopOffset = supertop.offset().top;
var div1Offset = div-1.offset().top;
var div2Offset = div-2.offset().top;
var div3Offset = div-3.offset().top;
var div4Offset = div-4.offset().top;
var view1 = $( window );
view1.bind(
"scroll resize",
function(){
var viewTop1 = view1.scrollTop();
if ((viewTop1 > supertopOffset) && (viewTop1 < div1Offset))
{
supertop
.removeClass()
.addClass("class-1")
;
}
else if ((viewTop1 > div1Offset) && (viewTop1 < div2Offset))
{
supertop
.removeClass()
.addClass("class-2")
;
}
else if ((viewTop1 > div2Offset) && (viewTop1 < div3Offset))
{
supertop
.removeClass()
.addClass("class-3")
;
}
else if ((viewTop1 > div3Offset) && (viewTop1 < div4Offset)) {
supertop
.removeClass()
.addClass("class-4")
;
}
else if ((viewTop1 > div4Offset))
{
supertop
.removeClass()
.addClass("class-5")
;
}
}
);
});
</script>
Be reminded that #supertop should be set as your html id, meaning your html should look like this:
<html lang="en" id="supertop">
On your specific classes, you can then set the background images you'll be using as the page scrolls down. Be reminded though that you should use a relatively small sized (the file size, not the resolution) image for them to load faster, a .jpg is what I recommend. And that you already declared all the background images in the default landing div on page load. Here's a sample of what I'm trying to tell you:html {
background: url(../images/bg_level-1.jpg), url(../images/bg_level-2.jpg), url(../images/bg_level-3.jpg), url(../images/bg_level-4.jpg), url(../images/bg_level-5.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.class-1{
background: url(../images/bg_level-1.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.class-2{
background: url(../images/bg_level-2.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.class-3{
background: url(../images/bg_level-3.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.class-4{
background: url(../images/bg_level-4.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.class-5{
background: url(../images/bg_level-5.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
By the way the following code let's your background be resized to whatever size your monitor screen is, brought to you by CSS-Tricks:
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
So the default background on page load is bg_level-1.jpg and the full colored background when you reached the end of the page is bg_level-5.png. That's it. :)
If you have any questions, or suggestions feel free to post them below.
0 Switch to the Web version to comment:
Post a Comment