Search code examples
jquerycssscrollwindowvisible

Make elements to fade in when visible

I'm using this jQuery plugin One Page Scroll and I would like to know how can I determine that the elements in different pages fade in when visible on the screen? Also it should be responsive as I adapted this plugin to work with Media-queries.

I've tryed to add fadeToggle afterMove, but it displays all the elements.

I've also spotted that the Plugin adds the active class to the element. Maybe I can target this? Please help, I'm novice with jQuery

Solution

  • The documentation states that there is a configuration function called "afterMove".

    $('#main').onepage_scroll({
  afterMove: function(index){
    //do your fadeIn here.
    $('section').eq(index).children().fadeIn();
  }
});