parallax_js

script.js

$(document).ready(function(){
    $(window).on('scroll',function(e){
        parallax();
    });
    $('a.earth,a.moon,a.saturn,a.rocket').on('click', function(e){
        e.preventDefault();
        var th = $(this),
            target = $(this).attr('href'),
            next_pos = $(target).offset().top,
            current_pos = $(window).scrollTop(),
            difference = Math.floor(current_pos) - Math.floor(next_pos);

        /* if we click on the link that we're on do not perform any action */
        if(difference > -5 && difference < 5 ) return;
        
        /* a little motion before move to other section */
        current_pos = next_pos > current_pos ? current_pos - 60 : current_pos + 60;
        $('html, body').animate({scrollTop: current_pos}, 150,
        function(){
            parallax();
        }).animate({scrollTop: next_pos}, 1000,
            function(){
                parallax();
            })
    })
});

function parallax(){
    var scrollPosition = $(window).scrollTop() * -1;
    $('#stars').css('top',scrollPosition * 0.2 + 'px');
    $('#images').css('top',scrollPosition * 0.5 + 'px');
}