Flying objects while scrolling
Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro
Welcome
^

Thanks to Paige Eller (Class of '14) for the idea and mandalas.

Here's the HTML Code

<header id="topHeader">Top header Content</header>
<div id="centeringDiv">
<article id="article1">
<header id="header1">
<div id="mainIntroHolder">
<div id="mainIntro">Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro Text of main intro </div>
<div id="welcome">Welcome<br>
^</div>
</div>
</header>
<div id="pics">
<div class="pic" id="pic1"><img src="projectX/images/pic1.png"/></div>
<div class="pic" id="pic2"><img src="projectX/images/pic2.png"/></div>
<div class="pic" id="pic3"><img src="projectX/images/pic3.png"/></div>
<div class="pic" id="pic4"><img src="projectX/images/pic4.png"/></div>
<div class="pic" id="pic5"><img src="projectX/images/pic5.png"/></div>
<div class="pic" id="pic6"><img src="projectX/images/pic6.png"/></div>
<div class="pic" id="pic7"><img src="projectX/images/pic7.png"/></div>
<div class="pic" id="pic8"><img src="projectX/images/pic8.png"/></div>
<div class="pic" id="pic9"><img src="projectX/images/pic9.png"/></div>
</div>
</article>
<article id="article2">
<header id="header2">Header 2</header>
<p>Article 2 content</p>
</article>
<article id="article3">
<header id="header3">Header 3</header>
<p>Article 5 content</p>
</article>
<article id="article4">
<header id="header5">Header 4</header>
<p>Article 4 content</p>
</article>
<article id="article5">
<header id="header5">Header 5</header>
<p>Article 5 content</p>
    <div id="sectionBottom"></div><!--VERY IMPORTANT to prevent unlimited scrolling-->
</article>
</div>
Here's CSS Code

body {
width: 100%;
overflow-x: hidden;/*prevents horizontal scroll bar*/
}
#topHeader {
width: 100%;
height: auto;
text-align: center;
color: #000;
font-size: 3em;
position: fixed;/*not scrollable*/
top: 0px;
left: 0px;
z-index: 999;/*on top of the main content*/
}
header {
width: 100%;
height: auto;
font-size: 3em;
text-align: center;
z-index: 300;
position: relative;
top: 0;
left: 0;
}
#mainIntroHolder {
width: 100%;
height: 600px;
position: absolute;
}
#mainIntro {
width: 100%;
position: absolute;
top: 50px;
font-size: 16px;
text-align: left;
}
#welcome {
width: 600px;
height: 130px;
z-index: 300;
color: #000;
font-size: 5em;
margin: 0 auto;
text-align: center;
cursor: pointer;
-webkit-transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-ms-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
transition: all 1s linear 0s;
}
#welcome:hover {
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
#pics {
width: 100%;
min-height: 500px;
position: relative;
margin: 0 auto;
top: 100px;
}
.pic {
position: absolute;
width: auto;
height: auto;
}
#pic1 {
top: 0px;
left: 0px;
z-index: 201;
}
#pic2 {
top: 0px;
left: 100px;
z-index: 202;
}
#pic3 {
top: 0px;
left: 200px;
z-index: 203;
}
#pic4 {
top: 100px;
left: 0px;
z-index: 204;
}
#pic5 {
top: 100px;
left: 100px;
z-index: 205;
}
#pic6 {
top: 100px;
left: 200px;
z-index: 206;
}
#pic7 {
top: 200px;
left: 0px;
z-index: 207;
}
#pic8 {
top: 200px;
left: 100px;
z-index: 208;
}
#pic9 {
top: 200px;
left: 200px;
z-index: 209;
}
#sectionBottom {
position: relative;
bottom: 0px;
width: 100%;
height: 0px;
clear:both;
}
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>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/transit.js"></script>

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


$("article").css({
"min-height":$(window).innerHeight()
});
$("#mainIntro").fadeToggle(0);//hides the main introduction text initially
$("#welcome").hover(function(){
$("#mainIntro").stop().fadeToggle(1000);//shows the main intro
},function(){
$("#mainIntro").stop().fadeToggle(1000);//hides the main intro
});
$(window).bind('scroll',function(e){
parallaxScroll();
});
        var rot1, rot2, rot3, rot4, rot5, rot6, rot7, rot8, rot9;
function parallaxScroll(){
        //get the number of pixels scrolled relative to the top of browser window
var scrolled = parseInt($(window).scrollTop());
        //set the direction and amount of rotation variables
        //negative - rotates CCW and the larger the multiplier, the faster the rotation
rot1 = scrolled*10 + "deg";
rot2 = scrolled*20 + "deg";
rot3 = -scrolled*20 + "deg";
rot4 = scrolled*30 + "deg";
rot5 = scrolled*-2 + "deg";
rot6 = scrolled*2.5 + "deg";
rot7 = scrolled*3 + "deg";
rot8 = -scrolled*40 + "deg";
rot9 = scrolled*4 + "deg";
$("#pic1").css({
x:(-(scrolled*2)),//negative x shifts left
y:(-(scrolled*2)),//negative y shifts up
rotate:rot1
});
$("#pic2").css({
x:((scrolled)),
y:((scrolled*4)),
rotate:rot2
});
$("#pic3").css({
x:((scrolled*2)),
y:(-(scrolled*0)),
rotate:rot3
});
$("#pic4").css({
x:(-(scrolled*4)),
y:((scrolled*0)),
rotate:rot4
});
$("#pic5").css({
x:(-(scrolled)),
y:(-(scrolled*2)),
rotate:rot5
});
$("#pic6").css({
x:((scrolled*1)),
y:(-(scrolled*2)),
rotate:rot6
});
$("#pic7").css({
x:((scrolled*4)),
y:(-(scrolled*2)),
rotate:rot7
});
$("#pic8").css({
x:((scrolled*3)),
y:((scrolled*3)),
rotate:rot8
});
$("#pic9").css({
x:((scrolled/10)),
y:((scrolled*5)),
rotate:rot9
});
                if(scrolled >= (parseInt($("#sectionBottom").offset().top)-$(window).innerHeight())){
                  $("body").css({
                    "overflow-y":"hidden"
                  });
                } else {
                  $("body").css({
                    "overflow-y":"scroll"
                  });
              }
}
Here's an extra article

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

You have reached the bottom of all content. You can no longer scroll. Please click on one of the buttons on the page.