Team:USTC-Software/Project/Overall/js/slide2

From 2013.igem.org

$(document).ready(function() { //when the document is ready...


//save selectors as variables to increase performance var $window = $(window); var $homeBG = $('#home'); var homesprite = $('#home .sprite'); var $projectsBG = $('#projects'); var $designBG = $('#design'); var designsprite = $('#design .sprite'); var $technikBG = $('#technik'); var techniksprite = $('#technik .sprite'); var $labBG = $('#lab'); var labsprite = $('#lab .sprite'); var $aboutBG = $('#about'); var aboutsprite = $('#about .sprite'); var $jobsBG = $('#jobs');

var windowHeight = $window.height(); //get the height of the window


//apply the class "inview" to a section that is in the viewport $("#home, #projects, #design, #technik, #lab, #about, #jobs").bind("inview", function (event, visible) { if (visible) { $(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; // $('#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

// Ausgabe: Position, Window height //$("#meta").html("pos: "+pos+" windowHeight: "+windowHeight);

// home: 0 if($homeBG.hasClass("inview")){ //call the newPos function and change the background position $homeBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 600, 0.3)}); //call the newPos function and change the secnond background position homesprite.css({'backgroundPosition': newPos(50, windowHeight, pos, 1143, 0.6)}); }

// projects: 1000 if($projectsBG.hasClass("inview")){ //call the newPos function and change the background position $projectsBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1800, 0.3)}); }

// design: 2000 if($designBG.hasClass("inview")){ //call the newPos function and change the background position $designBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 2800, 0.3)}); //call the newPos function and change the secnond background position designsprite.css({'backgroundPosition': newPos(50, windowHeight, pos, 3640, 0.6)}); }

// technik: 3000 if($technikBG.hasClass("inview")){ //call the newPos function and change the background position $technikBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 3850, 0.3)}); //call the newPos function and change the secnond background position techniksprite.css({'backgroundPosition': newPos(50, windowHeight, pos, 3660, -0.6)}); }

// lab: 4000 if($labBG.hasClass("inview")){ //call the newPos function and change the background position $labBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 4800, 0.3)}); //call the newPos function and change the secnond background position labsprite.css({'backgroundPosition': newPos(50, windowHeight, pos, 5300, 0.6)}); }

// about: 5000 if($aboutBG.hasClass("inview")){ //call the newPos function and change the background position $aboutBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 5800, 0.3)}); //call the newPos function and change the secnond background position aboutsprite.css({'backgroundPosition': newPos(50, windowHeight, pos, 6350, 0.6)}); }

// jobs: 6000 if($jobsBG.hasClass("inview")){ //call the newPos function and change the background position $jobsBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 6800, 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 });

});