Geek asks and answers

JQuery animation when scrolling to a specific point

I am trying to smooth the top gasket of the elements smoothly on a scroll. At the same time, I want 2 children to disappear, 1 of them and 1 inch. Ive got the attenuation, but I can't get the top for proper operation. Can anyone see what could be wrong with my function?

$(window).scroll(function () { 
    $('.transitionParent').css({
        'padding-top' : $(this).scrollTop()-($(this).scrollTop()/500)
    });
    $('.ipadOutline').css({
        'opacity' : 1-($(this).scrollTop()/500)
    });
    $('.ipadPhoto').css({
        'opacity' : 0+($(this).scrollTop()/500)
    });
});

http://jsfiddle.net/pXdhB/1/

I tried too (no luck!)

var fromTop = $(window).scrollTop();
$('.transitionParent').css('padding-top', '-' + (100 - fromTop));
+3
source share
3 answers

Something like that?

DEMO http://jsfiddle.net/pXdhB/7/

JQuery

$(window).scroll(function () {
    $('.transitionParent').stop().animate({
        'padding-top': $(this).scrollTop() - ($(this).scrollTop() / 500)
    }, 1000, function () {
        // Animation complete.
    });
    $('.ipadOutline').css({
        'opacity': 1 - ($(this).scrollTop() / 500)
    });
    $('.ipadPhoto').css({
        'opacity': 0 + ($(this).scrollTop() / 500)
    });
});
+2
source

Like this?

   $(window).scroll(function () { 
            $('.transitionParent').css({
                'padding-top' : 100 - ($(this).scrollTop()-($(this).scrollTop())/500)
            });
            $('.ipadOutline').css({
                'opacity' : 1-($(this).scrollTop()/500)
            });
            $('.ipadPhoto').css({
                'opacity' : 0+($(this).scrollTop()/500)
            });
        });

http://jsfiddle.net/DkM8a/

+1
source

Try it. Here is the relevant code:

var st = $(this).scrollTop(),
    newPt = 100 - st;

console.log(st + " " + newPt)
if (newPt > 0) {
    $('.transitionParent').css({
        'padding-top' : newPt
    })
}

demo: http://jsfiddle.net/pXdhB/8/

0
source

More articles:


All Articles