Blog

Easy Scrolling animations

Scrolling animations engage users to pay close atention to items that you want to emphasize. Besides, it also creates a professional look than will distinguish your websites from static ones.

At the demo page, it is possible to notice how the plugin is simple and cases a good effect.

For creating this effects, you will have to download two files from the creators of the waypoint plugin. They’re not heavy. Compressed, they weight about 10KB.

  • jquery.waypoints.min.js
  • waypoint.js

Besides these files, also include a CSS file with the animate.css library created by Daniel Eden. You can find stunning and various animations to choose from his website. Edit this file later to just include the animations you are going to use.

  • animate.css

Embed these files via enqueue (wordpress) or just including as the first line after the body tag.

After embeding, include the following code after the body tag, within a script tag:

var $box1 = $(‘.box-1′); /* replace .box-1 with your custom  css class that you’ll animate*/
$box1.waypoint(function(direction) { /*associate your class with the waypoint plugin*/
if (direction==’down’) { /*parameter for the waypoint plugin, activated when scrolling down*/
$box1.addClass(‘swing’); /*where swing is one animate.css class, that you can replace anytime, just picking from the animate.css website. This line is turning on the animate class.
}
else {
$box1.removeClass(‘swing’);
}
},
{offset:’70%’}); /** distance from top of the screen */

After that, just add a class called “animated” at the element that you are animating in your markup (HTML) file.

I hope this article was useful. Any doubts, be not afraid to ask.

 

Estefani Rangel

About the author

Estefani Rangel is a web developer graduated at the New Media and Web Development program at BCIT in Vancouver. Her passion is Front-End development.

She is always excited with sunny days, and it is quite impossible to keep her indoors if you don’t offer her a code editor to play with.