CODEWITHSUNDEEP
scrollopacity
user2097137
user2097137

Reputation: 25

Using Waypoints to fade in div when in view while fade out remaining divs when scrolling

Was wondering if you guys can point me in the right direction, my brain's a bit fried at the moment from pulling an all-nighter.

I'm trying to achieve what should be a relatively easy task using the Waypoints plugin that adds a class to a div when in view that switches it to full opacity. When the user continues to scroll down (or up), that class is faded out by removing the class which is then applied to the next div in view.

I found a site that achieves the desired effect I'm looking for here: http://www.araujoestate.com/pages/the-land.html

I believe the answer lies in the "Above" and "Below" callbacks?

Thanks for any input on this one.

UPDATED

I developed the following JSFiddle:
http://jsfiddle.net/nbgdzspy/2/

I'm producing the desired effect I was looking for, but was wondering if there's a more cleaner way to approach the code... Seems rather clunky.

$('#test1').waypoint(function(direction) {
    if (direction === 'down') {
        $(this).addClass("waypoint-here");
    }
}, {
    offset: '50%'
}).waypoint(function(direction) {
    if (direction === 'up') {
        $(this).addClass("waypoint-here");
        $("#test2").removeClass("waypoint-here");
    }
}, {
    offset: '25%'
});

$('#test2').waypoint(function(direction) {
    if (direction === 'down') {
        $("#test1").removeClass("waypoint-here");
        $(this).addClass("waypoint-here");
    }
}, {
    offset: '50%'
}).waypoint(function(direction) {
    if (direction === 'up') {
        $(this).addClass("waypoint-here");
        $("#test3").removeClass("waypoint-here");
    }
}, {
    offset: '25%'
});

Upvotes: 0

Views: 1916

Answers (1)

user2097137
user2097137

Reputation: 25

I think I found a rather simple solution to my problem above... Amazing what some fresh air can do.

Here's the code I plan on implementing:

$(function() {
    $('.waypoint').waypoint(function(direction) {
        if (direction === 'down') {
            $(this).addClass("waypoint-here");
            $(this).prev().removeClass("waypoint-here");
        }
    }, {
        offset: '50%'
    }).waypoint(function(direction) {
        if (direction === 'up') {
            $(this).addClass("waypoint-here");
            $(this).next().removeClass("waypoint-here");
        }
    }, {
        offset: '0'
    }); 
});

You can see it in action here: http://jsfiddle.net/nbgdzspy/6/

Upvotes: 1

Related Questions