Loading...

Super Simple Animated Scroll Down Cue Using Animate.css

Home / Front-End Web Development / Super Simple Animated Scroll Down Cue Using Animate.css

Everybody scrolls. But, in some cases adding a cue to scroll isn’t such a bad idea – especially if you have usability concerns, or your demographic may be a little less tech-savvy.

One of the easiest ways to cue your users to scroll is by adding a simple downward-pointing arrow. In this earlier post, I demonstrated how to create a full-height cover image with a bottom-aligned arrow cue. In this post, I’ll take it a step further by adding a simple animation using just 2 lines of code to my existing document. Check out the demo below:

VIEW DEMO

Using Animate.css

Animate.css is a CSS3 library of animation effects. The library provides you with over 70 different animations to choose from, and works in any browser with CSS3 support. You can apply animations to any element you want, simply by adding the required CSS classes to your HTML.

First we’ll start by adding Animate.css to your document. If you prefer to host the library with your site, you can download it here. If you want to use a hosted version, you can find one here. I’ll be using a hosted version of the library for the example below. So, inside your page’s <head> , before the closing </head>  tag, add the following:

Placing Your Cue

This example builds on an earlier post, but just to recap – you can easily align your scroll cue to the bottom of your cover or hero by placing it below the element, and then using a negative margin to overlap it. Since we’re working with a fluid (unknown) height, this simple technique will place your cue 80px above the cover bottom every time.

Here’s the HTML:

And the CSS:

Add Classes and Animate!

Now that we’ve added Animate.css to our <head>, we just need to add a few classes. In this example we’ll be using .animated, .infinite  and .bounce. You apply the .animated  class to the element you want to animate. I’ve chosen to use .infinite  because I’d like the element’s animation to loop infinitely, and .bounce  is the animation effect I wish to apply. Please see here to experiment with the full list of animations. The classes can be added to any element you wish to animate, and in this case I’ve decided to apply them directly to my arrow image.

That’s it! You can find more detailed usage information on GitHub. If this is the only animation you’ll be using from the library, I recommend copying only the animation classes you’ll need from the library and into your CSS, if you’re comfortable with that sort of thing – it’ll greatly reduce you file sizes. But, I’m sure once you see how easy it is to implement, you’ll add a few more! Animate.css is also great when paired with Waypoints.

Grab the demo files here:

DOWNLOAD DEMO FILES

 

Comments(0)

Leave a Comment