I recently saw a very cool implementation of Parallax Scrolling achieved with JavaScript / JQuery and CSS 3 on the website of the Milwaukee Police department. What a strange place to find something so flashy!
The basic idea of parallax scrolling is to use layers travelling at different speeds in relation to the user's current scroll position to create an illusion of depth. It was invented by computer games designers and animators who wanted to give 2D games more depth.
I shall do a post later about how you can re-use this code for your own purposes, but for now I just wanted to show you the JQuery code which achieved this effect. Doesn't it just look so elegant? If you want to get good with computer programming you have to start reading code like this just like you read a human language...
The basic idea of parallax scrolling is to use layers travelling at different speeds in relation to the user's current scroll position to create an illusion of depth. It was invented by computer games designers and animators who wanted to give 2D games more depth.
I shall do a post later about how you can re-use this code for your own purposes, but for now I just wanted to show you the JQuery code which achieved this effect. Doesn't it just look so elegant? If you want to get good with computer programming you have to start reading code like this just like you read a human language...
var iddiv="";
var showdiv=false;
var posY = 0;
var posYold=0;
function calcParallax(tileheight, speedratio, scrollposition) {
return ((tileheight - (Math.floor(scrollposition / speedratio) % (tileheight+1)))-tileheight);
}
function calcParallaxInv(tileheight, speedratio, scrollposition) {
return ((tileheight + (Math.floor(scrollposition / speedratio) % (tileheight+1)))+tileheight);
}
function fixedBoxes(){
var win = jQuery(window);
var boxes = jQuery('.bg-moto, .bg-car, .bg-truck-men, .bg-ground, .w2 > .content:not(.no-fixed), .bg-source, .bg-stats, .bg-most, #heroes-page, #about-page, .bg-officer');
boxes.each(function(){
var box = jQuery(this);
box.css({
position:'fixed'
})
});
var holder = jQuery('#w1');
var sections = jQuery('.bg-source, .bg-stats, .bg-ground, .bg-most, #heroes-page, #about-page');
if(sections.length){
if(holder.width() > 1000) sections.css('width',holder.width());
else sections.css('width',1000);
}
var imgs = jQuery('.bg-truck, .bg-car01, .bg-chief, .f-ribbon, .bg-officer, .bg-truck-men, .bg-car, .bg-moto');
imgs.each(function(){
var img = jQuery(this);
img.data('width',img.width());
if(img.offset().left + img.width() > holder.offset().left + holder.width()){
img.width(img.width() - (img.offset().left + img.width() - holder.offset().left - holder.width()));
}
});
win.resize(function(){
if(sections.length){
if(holder.width() > 1000) sections.css('width',holder.width());
else sections.css('width',1000);
}
imgs.each(function(){
var img = jQuery(this);
if(img.offset().left + img.data('width') > holder.offset().left + holder.width()){
img.width(img.data('width') - (img.offset().left + img.data('width') - holder.offset().left - holder.width()));
}
});
})
}
function initParalaxPage(){
var page = jQuery('#wrapper');
page.bind('scroll',function() {
posY = page.scrollTop();
var layer1 = calcParallax(20000, 2.6, posY);
var layer2 = calcParallax(20000, 2.2, posY);
var layer3 = calcParallax(20000, 1.8, posY);
var layer4 = calcParallax(20000, 1.4, posY);
var layer5 = calcParallax(20000, 1, posY);
var layer6 = calcParallax(20000, 1.3, posY);
var layer7 = calcParallax(20000, 1.1, posY);
var layer8 = calcParallax(20000, 1.2, posY);
var layer9 = calcParallax(20000, 1.1, posY);
var layer10 = calcParallax(20000, 0.9, posY);
var layer11 = calcParallax(20000, 0.7, posY);
var layer12 = calcParallax(20000, 3.3, posY);
var layer13 = calcParallax(20000, 30,posY);
if((Math.abs(posY-posYold))>10){
//Home
jQuery(".bg-moto").animate({marginTop:layer1},{queue:false, duration: 1200, "easing": "easeOutCubic"});
jQuery(".bg-car").animate({marginTop:layer2},{queue:false, duration: 1300, "easing": "easeOutCubic"});
jQuery(".bg-truck-men").animate({marginTop:layer3},{queue:false, duration: 1400, "easing": "easeOutCubic"});
jQuery(".bg-ground").animate({marginTop:layer4},{queue:false, duration: 1400, "easing": "easeOutCubic"});
jQuery("#home-page .content").animate({marginTop:layer5},{queue:false, duration: 1400, "easing": "easeOutCubic"});
//Source
jQuery(".bg-source").animate({marginTop:layer4},{queue:false, duration: 1600, "easing": "easeOutCubic"});
//Stats
jQuery(".bg-stats").animate({marginTop:layer4},{queue:false, duration: 1600, "easing": "easeOutCubic"});
//Most Wanted
jQuery(".bg-most").animate({marginTop:layer4},{queue:false, duration: 1600, "easing": "easeOutCubic"});
jQuery(".bg-officer").animate({marginTop:layer10},{queue:false, duration: 1300, "easing": "easeOutCubic"});
jQuery(".bg-most .content").animate({marginTop:layer11},{queue:false, duration: 1400, "easing": "easeOutCubic"});
//Heroes
jQuery("#heroes-page").animate({marginTop:layer4},{queue:false, duration: 1600, "easing": "easeOutCubic"});
//$(".bg-chief").animate({marginTop:layer13},{queue:false, duration: 1000, "easing": "easeOutCubic"});
jQuery("#heroes-page .content").animate({marginTop:layer11},{queue:false, duration: 1300, "easing": "easeOutCubic"});
//About
jQuery("#about-page").animate({marginTop:layer4},{queue:false, duration: 1600, "easing": "easeOutCubic"});
jQuery(".bg-car01").animate({marginTop:layer3},{queue:false, duration: 1300, "easing": "easeOutCubic"});
jQuery(".bg-truck").animate({marginTop:layer4},{queue:false, duration: 1400, "easing": "easeOutCubic"});
jQuery("#about-page .content").animate({marginTop:layer5},{queue:false, duration: 1400, "easing": "easeOutCubic"});
}
posYold = page.scrollTop();
});
jQuery(window).mousewheel(function(event, delta, deltaX, deltaY){
if(delta < 0) page.scrollTop(page.scrollTop() + 65);
else if(delta > 0) page.scrollTop(page.scrollTop() - 65);
return false;
})
}
No comments:
Post a Comment
Please leave your thoughts and comments!