Changing BG While Scrolling

This page is an example of how to make the background image change when the user scrolls to a particular vertical position on the page. Click on the buttons at the top right or scroll the page to see the effect

Here's the HTML Code


<nav>
<div class="btn" id="btn1">Button 1</div>
<div class="btn" id="btn2">Button 2</div>
<div class="btn" id="btn3">Button 3</div>
<div class="btn" id="btn4">Button 4</div>
<div class="btn" id="btn5">Button 5</div>
</nav>
<section id="section1">
<header id="header1">Header 1</header>
<article id="article1">
<div class="centeringDiv">
<p>Article 1</p>
</div>
</article>
</section>
<section id="section2">
<header id="header2">Header 2</header>
<article id="article2">
<div class="centeringDiv">
<p>Article 2</p>
</div>
</article>
</section>
<section id="section3">
<header id="header3">Header 3</header>
<article id="article3">
<div class="centeringDiv">
<p>Article 3</p>
</div>
</article>
</section>
<section id="section4">
<header id="header4">Header 4</header>
<article id="article4">
<div class="centeringDiv">
<p>Article 4</p>
</div>
</article>
</section>
<section id="section5">
<header id="header5">Header 5</header>
<article id="article5">
<div class="centeringDiv">
<p>Article 5</p>
</div>
</article>
</section>
Header 2

Here's CSS Code


header, section, article, aside, figure, figcaption, nav, footer {
display:block;
}
body {
margin: 0px;
padding: 0px;
font-size:100%;
font-family:Verdana, sans-serif;
color:rgba(0,0,0,1)
}
nav {
width:500px;
height:50px;
position:fixed;
margin-left:-250px;
top:0;
left:50%;
z-index:99999;
}
.btn {
width:100px;
height:50px;
text-align:center;
float:left;
background-color:rgba(255,0,0,0.5);
font-size:1em;
cursor:pointer;
}
.section {
postion:relative;
height:auto;
width:100%;
clear:both;
z-index:100;
}
header {
height:100px;
padding-top:75px;
font-size:3em;
text-align:center;
width:100%;
z-index:300;
position:relative;
top:0;
left:0;
}
article {
background-color:rgba(255,255,255,1);
height:auto;
width:100%;
position: relative;
z-index:300;
}
.centeringDiv {
width: 960px;
min-height:300px;
height: auto;
margin: 0 auto;
position: relative;
padding:10px;
z-index: 200;
}
Header 3

Here's the jQuery Code

You'll need these scripts in the <head> of your html page


<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>

Here's the script that make the whole thing function properly


var btnClicked, scrollTime, easingMethod;
//set initial values for variables
topAdjustment = 50;//how many pixels do you want the scroll to stop below the top of the browser
scrollTime = 1000;//how much time in milliseconds 1000ms=1s do you want the scroll to occur
easingMethod = "easeInOutQuint";//type of easing for the scroll effect
//actions when buttons are clicked
$(".btn").click(function () {
var btnClicked=$(this).attr("ID");
var sectionNumber=btnClicked.substring(3,5);//extracts the button number, i.e. btn1 becomes 1
var targetSection = "#section"+sectionNumber;
if(sectionNumber!=0){//since there's no section0, this execute for sectionNumbers not equal to 0
$(targetSection).goTo();//calls on function goTo below to scroll to targetSection
} else {//in the case that the sectionNumber is equal to 0
$("body").goTo();//calls on function goTo below to scroll to <body> tag y position
}
});
(function($) {//defining a function
$.fn.goTo = function() {
$("html, body").stop().animate({//stop is for quick clicking of buttons to stop current action
"scrollTop": $(this).offset().top//the executes the scrolling action to new y position
}, scrollTime, easingMethod);
return this;
}
})(jQuery);
//Change background image code
var section1H, section2H, section3H, section4H, section5H, changeBGAdjustment;
changeBGAdjustment = 100;
//gather info about where the top of each section starts relative to the top of the screen when the page loads
section1H = $("#section1").offset().top - changeBGAdjustment;
section2H = $("#section2").offset().top - changeBGAdjustment;
section3H = $("#section3").offset().top - changeBGAdjustment;
section4H = $("#section4").offset().top - changeBGAdjustment;
section5H = $("#section5").offset().top - changeBGAdjustment;
//create an array of image locations for future use down below
var bgImages = [];
bgImages[0] = "url(/galleries/backgrounds/metal1.jpg)";
bgImages[1] = "url(/galleries/backgrounds/metal2.jpg)";
bgImages[2] = "url(/galleries/backgrounds/metal3.jpg)";
bgImages[3] = "url(/galleries/backgrounds/metal4.jpg)";
bgImages[4] = "url(/galleries/backgrounds/metal5.jpg)";
//preload background images so that there is no white flash when background images change
//due to delay in downloading new background image
$('<img src="/galleries/backgrounds/metal1.jpg"/>');
$('<img src="/galleries/backgrounds/metal2.jpg"/>');
$('<img src="/galleries/backgrounds/metal3.jpg"/>');
$('<img src="/galleries/backgrounds/metal4.jpg"/>');
$('<img src="/galleries/backgrounds/metal5.jpg"/>');
//now create a div that
$("body").prepend('<div id="bgHolder"></div>');
$("#bgHolder").css({
"width":"100%",
"height":$("html").innerHeight(),
"background-image":bgImages[0],
"background-position":"center top",
"background-repeat":"repeat-y",
"position":"fixed",
"top":"0",
"left":"0",
"z-index":"0"
});
$(window).scroll(function(){
var yPos = 0, bgURL;
yPos = $(window).scrollTop();
switch (true) {
case (yPos < section2H):
bgURL = bgImages[0];
break;
case (yPos < section3H):
bgURL = bgImages[1];
break;
case (yPos < section4H):
bgURL = bgImages[2];
break;
case (yPos < section5H):
bgURL = bgImages[3];
break;
case (yPos >= section5H):
bgURL = bgImages[4];
break;
}
$("#bgHolder").css({
"background-image":bgURL
});
});
Header 4

Article 4

Article 4

Article 4

Article 4

Article 4

Article 4

Article 4

Article 4

Article 4

Article 4

Article 4

Article 4

Article 4

Article 4

Article 4

Article 4

Article 4

Article 4

Article 4Article 4
Header 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5

Article 5