CODEWITHSUNDEEP
jqueryscrolljquery-animateopacity
gilesadamthomas
gilesadamthomas

Reputation: 181

opacity based on scroll left distance

$(document).scroll(function() {

    var distanceLeft = $(document).scrollLeft();

    if( distanceLeft > 3800)
    {
        $('#first_circle').animate({
            opacity: 1
        }, 1000);
    }

    if( distanceLeft < 3800)
    {
        $('#first_circle').animate({
            opacity: 0
        }, 1000);
    }
)};

Hi Im trying to correct this so that when the scroll goes past 3800 the div fades in and when the user scrolls back it fades out? thank you for any input

Upvotes: 0

Views: 665

Answers (2)

yckart
yckart

Reputation: 33408

You can of course use a simple way like mkey answer. However if you need a more complex thing to "animate" try jQuery Transe. It is a thorough solution for exactly this problem. You can change almost anything based on the current scroll offset (even CSS3-Transforms and suchlike).

In your case, try something like this:

$('#fading').transe({
    direction: 'x',
    start: 3575,
    end: 4150,
    css: 'opacity',
    from: 0,
    to: 1
});

Demo

Upvotes: 0

mkey
mkey

Reputation: 212

Just change the vars and add some math: http://jsfiddle.net/z7E9u/155/

Upvotes: 2

Related Questions