Delay slider load until scroll

I’m building the homepage of a WordPress site with several master sliders on it, I would like to delay the load of the sliders further down the page until the user has scrolled down to them. I’m trying to recreate the effect created on this page http://www.masterslider.com/wordpress/pro/

At first, I thought that all the elements on this page were created using master sliders but upon inspection, only the top is a master slider and I’m assuming the rest were animated using JS. The rows further down all animate only once you’ve scrolled down to them.

Read More

Any help with how I can recreate this effect using sliders would be appreciated.

I’m thinking that I could wrap each call to a slider in some js/jquery which watches the scroll height of the window

i.e.

$(window).scroll(function() {
    if ( $(document).scrollTop() > 100 ) {
          <?php masterslider(1); ?>
    }
});

$(window).scroll(function() {
    if ( $(document).scrollTop() > 400 ) {
          <?php masterslider(2); ?>
    }
});

Is it possible to wrap a call to a PHP template within a jQuery if statement as above?

Related posts

Leave a Reply