JavaScript on page scroll animation

on-page-scroll-animation-webomnizz

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();
})();

 

Posted by Jogesh Sharma

Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.