jQuery animate elements as in view (on scroll) plug-in

Animate elements as in view

The jQuery-scroll-animate is a light-weight plug-in that is used to animate the elements in the view. That means, as the user scrolls down to the page, you may animate different elements as they appear on the screen of the user. The section with animation may contain different elements like simple paragraphs, tables, forms etc.

Demo1 Demo2
Developer page Download plug-in

How to set up scroll animation plug-in on your website?

First of all, download the plug-in from the above link (GitHub website). Include the jquery-scroll-animate.js file in the <head> section after the reference of jQuery library.

Also include the animate.css file in the <head> section:

<link rel=”stylesheet” href=’css/scroll-animate/animate.css’>

 

<script src=”//code.jquery.com/jquery-1.11.3.min.js” ></script>

<script src=’js/scroll-animate/jquery-scroll-animate.js’></script>

The markup contains the content that you want to animate on scroll with a few data attributes. See the demos and code below for learning how to use those.

Finally, initiate the plug-in via JavaScript:

$(‘.element’).jqueryScrollAnimate({

direction:true,

animated:’.ani’

})

A demo of animating text on scroll

Open the demo by clicking the link or image below and scroll down the page. See the text appearing with animation as you scroll down to section 1, 2 and so on.

jQuery scroll animation

See online demo and code

As this plug-in uses the animate.css for specifying the type of animation, so you may use different values for each line of text by using the animate-effect data attribute. You may also specify the animation duration by using the animate-duration attribute while the delay in the animation can be set by animate-delay attribute.

The markup for the above demo is:

 

The Script:

 

A demo of using images

As mentioned earlier, you may place different elements for animation as those get in focus. You may place forms, tables and even images that display with animation.

See this demo where I used an image and displayed in multiple sections with different values for animation type, time and delay. Have a look:

jQuery scroll animation images

See online demo and code

The markup:

 

See the output and complete code on the demo page.