How do I create elements that slide into view as they scroll into view and then disappear again as they scroll off the page?

Asked Sep 02 '15 at 15:51

Active Sep 02 '15 at 15:51

Viewed 894 times

I'm looking to create an effect where two blocks of text slide in from the left and right as they scroll into view, and then the same blocks vanish sliding back the way they came as they leave the viewport. I need to change the opacity and the left/right value, I think, but I am having a hard time making this work.

Problems I encounter are that the effect either doesn't trigger even though I can detect that I am inside the right if/else section, or that the effect triggers endlessly.

Detecting when the page is scrolled to the right area is easily done via this function:

$(window).on('scroll', function() {
    scrollPosition = $(this).scrollTop();
    if (scrollPosition > 500 && scrollPosition < 1000) {
        //slide into view
    } else {
        //slide out of view
    }
});

I've been able to glean some insights from this previous question and this one, but I still can't find a solution that works for me.

Can anyone help?

edited May 23 '17 at 10:26

Community

asked Sep 02 '15 at 15:51

MikeK

You might look into wow.js combined with animate.css. That wheel's been invented already. – isherwood Sep 02 '15 at 15:52
1

The effect you're looking for is called [Parallax Scrolling](http://stackoverflow.com/questions/15657199/parallax-scrolling) – jonny Sep 02 '15 at 15:53
@JonathanBrooks It doesn't sound like he's going for a Parallax effect. Just a slide in from the side. – Clayton Leis Sep 02 '15 at 19:44
@ClaytonLeis exactly – MikeK Sep 03 '15 at 08:02

How do I create elements that slide into view as they scroll into view and then disappear again as they scroll off the page?

0 Answers0