Untitled

Javascript and Performance

$(function(){

 

 

    var $window = $(window);

    var windowHeight = $window.height();

    var windowWidth = $window.width();

    var content = $("#content");

    var section = content.children("section");

    var sectionsNumbers = section.length-1;

    var illusion =  $(".illusion1");

    var mask = $('#mask');

    // Scroll sets

 

    var windowScrollX = ((sectionsNumbers+1)*windowWidth)-windowWidth;

    var windowScrollY = ((sectionsNumbers+1)*windowHeight)-windowHeight;

 

    content.css({"width":windowScrollX+windowWidth,"height":windowScrollY+windowHeight});

 

    illusion .css({"width":windowScrollX+windowWidth,"height":windowScrollY+windowHeight});

 

 

    // Set mask w and h

 

    mask.css({"width":windowWidth,"height":windowHeight});

    $(".scrollRule").css("height", (sectionsNumbers+1)*windowHeight);

 

 

    section.each(function(sectionCount,val) {

 

        // Defines its width and height

        var $this = $(this);

        $this.css({"width":windowWidth,"height":windowHeight,"left":sectionCount*windowWidth,"top":sectionCount*windowHeight});

 

 

    });

 

    // When window scrolls

 

 

    var angleVar = windowScrollX/windowScrollY;

    var curScrollTop;

    $(window).scroll(function(){

        var $this = $(this);

        curScrollTop = $this.scrollTop();

        content.stop().animate({left: "-"+curScrollTop*angleVar, top: "-"+curScrollTop}, {duration: 1250, easing: 'easeOutQuart'});

       illusion.stop().animate({left: "-"+curScrollTop*angleVar*0.5, top: "-"+curScrollTop*0.5}, {duration: 1250, easing: 'easeOutQuart'});        

    });

 

});