JavaScript on page scroll animation

Here is the easiest way to animation on page scroll. We just have to check the scrolled amount during page scroll, and there is a lot of ways and the free plugin to achieve that but in this post we are using the simple javaScript. You have to attach an event on page scroll.

[buttons href=”http://webomnizz.com/demo/on-page-scroll-animation/” title=”Live Demo”]
Take a look on the below CSS and javaScript section, you just have to attach and event on page scroll like :
[js]window.addEventListener(‘scroll’, function(){ …. });[/js]

CSS Section

.wrapper{
width: 100%;
margin: 0;
padding: 0;
background: #E92E49;
position: fixed;
left: 0px;
top: 0px;
overflow: hidden;
-moz-transition: width 0.1s;
}
.short-header{
width: 100px;
left: 0px;
}
.full-header{
width: 100%;
left: 0px;
}
#jp-side{
position: fixed;
left: 0px;
top: 0px;
width: 255px;
background: #E92E49;
min-height: 255px;
}
#jp-side li a{
height: 60px;
line-height: 60px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-transform: uppercase;
font-size: 20px;
padding-left: 30px;
color: #ffffff;
}
#jp-side li a:hover,
#jp-side li a:focus{
background: #FBBF4D;
color: #E92E49;
}
#menus ul{
margin: 0;
padding: 0;
width: 100%;
height: 80px;
}
#menus ul li{
margin: 0px;
padding: 0px;
height: 80px;
line-height: 80px;
}
#menus ul li a{
color: #ffffff;
text-shadow: none;
line-height: 80px;
font-size: 20px;
padding: 0 20px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-transform: uppercase;
margin: 0;
}
#menus ul li a:hover,
#menus ul li a:focus{
border-radius: 0px;
background: #FBBF4D;
color: #E92E49;

}

.content-data{
margin-top: 110px;
}
.content-data p{
font-size: 18px;
margin-bottom: 25px;
}

JavaScript Section

(function(){

var docElement = document.documentElement,
menuHeader = document.getElementById('wp_head'),
checkScroll = false,
changeHeadOn = 70,
winH = window.innerHeight,
leftBox = document.getElementById('leftbox'),
rightBox = document.getElementById('rightbox');

// Ready Sidebar
document.getElementById('jp-side').style.height = winH + "px";

// Initialize the function
function init(){
if(window.addEventListener){
window.addEventListener('scroll', function(){
if( !checkScroll ){
checkScroll = true;
setTimeout( scrollPage, 250 );
}
}, false);
}
else {
window.attachEvent("scroll", function(){
if( !checkScroll ){
checkScroll = true;
setTimeout( scrollPage, 250 );
}
});
}
}

function scrollPage(){
var sY = scrollY();

if( sY <= changeHeadOn ){
classie.add(menuHeader, 'full-header');
classie.remove(menuHeader, 'short-header');
classie.add(rightBox, 'span12');
classie.add(leftBox, 'hide');
} else {
classie.add(menuHeader, 'short-header');
classie.remove(menuHeader, 'full-header');
classie.add(rightBox, 'span10');
classie.remove(leftBox, 'hide');
}

checkScroll = false;
}

function scrollY(){
return window.pageYOffset || docElement.scrollTop;
}

init();
})();