/* JavaScript for the demo: Recreating the Nikebetterworld.com Parallax Demo Demo: Recreating the Nikebetterworld.com Parallax Demo Author: Ian Lunn Author URL: http://www.ianlunn.co.uk/ Demo URL: http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/ Tutorial URL: http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/ License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/. Dual licensed under the MIT and GPL licenses: http://www.opensource.org/licenses/mit-license.php http://www.gnu.org/licenses/gpl.html */ $(document).ready(function() { //when the document is ready... var windowHeight = $window.height(); //get the height of the window //apply the class "inview" to a section that is in the viewport $('#intro, #second, #third, #fourth').bind('inview', function (event, visible) { if (visible == true) { $(this).addClass("inview"); } else { $(this).removeClass("inview"); } }); //function that places the navigation in the center of the window function RepositionNav(){ var windowHeight = $window.height(); //get the height of the window var navHeight = $('#nav').height() / 2; var windowCenter = (windowHeight / 2); var newtop = windowCenter - navHeight;$(document).ready(function() { // Stuff to do as soon as the DOM is ready; // put the search in the middle on load var windowHeight = $(window).height(); var positionTop = ((windowHeight - 138)/2); $('#searchForm').css('top', positionTop + "px"); // $('#first').find('#question1').delay(1000).show('drop', { direction: 'up' }, 1000); // $('#first').find('#question2').delay(1150).show('drop', { direction: 'up' }, 1000); // $('#first').find('#question3').delay(1300).show('drop', { direction: 'up' }, 1000); /* $('#first').find('#question4').delay(1450).show('drop', { direction: 'up' }, 1000); $('#first').find('#question5').delay(1600).show('drop', { direction: 'up' }, 1000); $('#first').find('#question6').delay(1750).show('drop', { direction: 'up' }, 1000); $('#first').find('#question7').delay(1900).show('drop', { direction: 'up' }, 1000); $('#first').find('#question8').delay(2050).show('drop', { direction: 'up' }, 1000); $('#first').find('#searchForm').delay(2200).fadeIn(1000); */ // enable smooth scrolling effect when a question is selected $.localScroll(); { if (visible == true) { $(this).addClass('inview'); } else { $(this).removeClass('inview'); } }); // function that is called for every pixel the user scrolls. Determines the position of the background // arguments: horizontal position of bg, viewport height, scrollbar position, background offset from top, scroll speed multiplier for bg, prevent positive value function newPos(x, windowHeight, pos, adjuster, multiplier, reset) { var result = -((windowHeight + pos) - adjuster); if(reset && result > 0) result = 0; return x + "% " + (result * multiplier) + "px"; } // function to be called whenever the window is scrolled or resized function Move() { // get the position of the scrollbar var pos = $window.scrollTop(); if(!jQuery.browser.msie && jQuery.browser.version < 9){ $('.inview').each(function() { if($(this).attr('id') != 'first' && $(this).attr('id') != 'fourth') { $(this).css({'backgroundPosition': newPos(50, windowHeight, pos, 2000, 0.6, false)}); $(this).find('.answer').show(); var blockPosTop = $(this).find('.content').offset().top; var blockHeight = $(this).find('.content').height(); if(pos - blockPosTop + windowHeight > 0 && pos - blockPosTop + (windowHeight / 2) - (blockHeight / 2) < 0) { $(this).find('.content').css('opacity', (pos - blockPosTop + windowHeight) / ((windowHeight + blockHeight) / 2)); } if(pos - blockPosTop + (windowHeight / 2) - (blockHeight / 2) > 0 && pos - blockPosTop - blockHeight < 0) { $(this).find('.content').css('opacity', -1 * (pos - blockPosTop - blockHeight) / ((windowHeight + blockHeight) / 2)); } } }); } // only move the background of the section which has the inview class if($first.hasClass('inview')) { $first.css({'backgroundPosition': newPos(50, windowHeight, pos, 650, 0.4, true)}); } if($second.hasClass('inview')) { $second.css({'backgroundPosition': newPos(50, windowHeight, pos, 1900, 0.6, false)}); } if($third.hasClass('inview')) { $third.css({'backgroundPosition': newPos(60, windowHeight, pos, 3150, 0.6, false)}); } if($fourth.hasClass('inview')) { $fourth.css({'backgroundPosition': newPos(50, windowHeight, pos, 4400, 0.6, false)}); } if($fifth.hasClass('inview')) { $fifth.css({'backgroundPosition': newPos(50, windowHeight, pos, 5600, 0.6, false)}); } if($sixth.hasClass('inview')) { $sixth.css({'backgroundPosition': newPos(50, windowHeight, pos, 6800, 0.6, false)}); } if($seventh.hasClass('inview')) { $seventh.css({'backgroundPosition': newPos(50, windowHeight, pos, 8000, 0.6, false)}); } if($eighth.hasClass('inview')) { $eighth.css({'backgroundPosition': newPos(50, windowHeight, pos, 9200, 0.6, false)}); } if($ninth.hasClass('inview')) { $ninth.css({'backgroundPosition': newPos(50, windowHeight, pos, 10400, 0.6, false)}); } if($tenth.hasClass('inview')) { $tenth.css({'backgroundPosition': newPos(50, windowHeight, pos, 11400, 0.6, false)}); } } // when user resizes the window $window.resize(function() { // recalculate the height of the window windowHeight = $(window).height(); // move the background Move(); }); // when user scrolls $window.bind('scroll', function() { // move the background Move(); }); }); $('#nav').css({"top": newtop}); //set the new top position of the navigation list } //function that is called for every pixel the user scrolls. Determines the position of the background /*arguments: x = horizontal position of background windowHeight = height of the viewport pos = position of the scrollbar adjuster = adjust the position of the background inertia = how fast the background moves in relation to scrolling */ function newPos(x, windowHeight, pos, adjuster, inertia){ return x + "% " + (-((windowHeight + pos) - adjuster) * inertia) + "px"; } //function to be called whenever the window is scrolled or resized function Move(){ var pos = $window.scrollTop(); //position of the scrollbar //if the first section is in view... if($firstBG.hasClass("inview")){ //call the newPos function and change the background position $firstBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 900, 0.3)}); } //if the second section is in view... if($secondBG.hasClass("inview")){ //call the newPos function and change the background position $secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)}); //call the newPos function and change the secnond background position trainers.css({'backgroundPosition': newPos(50, windowHeight, pos, 1900, 0.6)}); } //if the third section is in view... if($thirdBG.hasClass("inview")){ //call the newPos function and change the background position $thirdBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 2850, 0.3)}); } //if the fourth section is in view... if($fourthBG.hasClass("inview")){ //call the newPos function and change the background position for CSS3 multiple backgrounds $fourthBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 200, 0.9) + ", " + newPos(50, windowHeight, pos, 0, 0.7) + ", " + newPos(50, windowHeight, pos, 0, 0.5) + ", " + newPos(50, windowHeight, pos, 700, 0.3)}); } $('#pixels').html(pos); //display the number of pixels scrolled at the bottom of the page } RepositionNav(); //Reposition the Navigation to center it in the window when the script loads $window.resize(function(){ //if the user resizes the window... Move(); //move the background images in relation to the movement of the scrollbar RepositionNav(); //reposition the navigation list so it remains vertically central }); $window.bind('scroll', function(){ //when the user is scrolling... Move(); //move the background images in relation to the movement of the scrollbar }); });