CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

Slide in div on scroll from left

I am trying to load the DIV with slide-in effect from left and right, but this is when I scroll to the current screen and when scroll to the next div, the above element move out from left and right (reverse animation)

How this can be achieved? I tried with the Animate CSS, so it just slide in on page load but not on scroll, any help?

Here is the JSFiddle of what I have created

Upvotes: 0

Views: 2382

Answers (1)

Robbin van der Jagt
Robbin van der Jagt

Reputation: 796

Have you tried using .scrollTop() with jQuery? This will start a animation when the user has scrolled a certain amount on your page, for example 300px .scrollTop(300px)

$(window).scroll(function() {
 if ($(this).scrollTop() > 300) {
   $('#yourElement').addClass('animated bounceOutLeft'); 
 } 
});

Upvotes: 3

Related Questions