While using full page js how to add animations (like slide in left, fade in etc) to div as soon as they are in view?

Question

I am creating a webpage using full page js (link: 'http://alvarotrigo.com/fullPage/' ) Now, I want a few divs to display animated effects when they are in view while scrolling. For usual websites, when I am not using fullpage.js it is easily achievable using the following code:

JQuery:

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function(){
    if (isScrolledIntoView('.class') === true) {
        $('.class').addClass('in-view')
    }
});

CSS:

.class {
    opacity: 0;
}
.class.in-view {
    opacity: 1;
}

however this is not working while using fullpage.js, can somebody suggest some other way. I want a div to come sliding in when I reach that particular section/slide. thank you!

Answer 1

You have an example within the examples folder of fullPage.js. The filename is "callbacks.html".Check it out.

You can make use of fullPage.js callbacks to fire them, or even to the state classes added to the body element if you want to fire them with CSS.

Check also this example regarding the fullPage.js callbacks

Answer 2

You can do it like this :

isOnScreen = function(ele){
var win = $(window);

var viewport = {
    top : win.scrollTop(),
    left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();

var element = $("ele");
var bounds = element.offset();

bounds.right = bounds.left + element.outerWidth();
bounds.bottom = bounds.top + element.outerHeight();

return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

}

you can find jsfiddle link here :