Slide in Animations on Scroll

I was playing around with my new site when I stumbled across a link a friend sent me that used slide in animations when scrolling down the page.

What I needed was a way to calculate what was in the viewport, then do a css animation once it appears. jQuery uses a :visible selector, but what I need to use is math to figure out if a specific element is within the viewport.

I, through some research, found an article on CSS-Tricks that mentioned a plugin by Digital Fusion that handles this without installing some crazy overloaded pugin.

Quick Demo

And it goes like this:

CSS-Ticks version:

And CSS:

My Work Around

The problem for me was, I wanted it to fire more than once. Meaning, I wanted it to scroll or transition in, then transition out when scroll back to the top of the page. (Maybe this is bloated code, but it works for me.

Using the same plugin as above:

What this does is, read the page location applying an else statement to the function. if (jQuery(this).scrollTop() > 100) displays your class, } else { removes the addClass and adds another class “go-out”. In short, this shows the animations when scrolling down, but resets them when scrolling up so they re-fire when scrolling down a second time.

Don’t forget to make the animations work in multiple browsers.

Working Demo:

Now, scroll back to the top of the page then back down 🙂

 

About Denny Smith

Specializing in HTML5, CSS3, jQuery, WordPress, Expression Engine, SEO Strategies and Responsive Web Development, I build intuitive webs that demand results.
I'm not as mean as I look...
Posted in Featured, jQuery, Sludge, Tips

« « Previous Page Long Form Project   |   Next PagejQuery (Must Haves) When Developing a Website » »
Support