Animate HTML Elements by jQuery plug-in

Animating HTML elements

In jQuery animate method’s tutorial, I showed how you can use the $.animate method for simple animations of HTML elements like a div, circle, and other UI elements.

Similarly, in the free template section, I used animate.css plug-in for creating animations in different elements that used different effects like bounceIn, bounceOut, etc. However, only a single animation can be applied by using that CSS plug-in.

In this tutorial, I will show you how to apply multiple animations on single and multiple group elements by using animate-plus plug-in.

This plug-in also uses animate.css underway and adds more useful features that I will show you with live examples. At the bottom, you can also see simple steps for setting up this cool plug-in to use on your web pages.

An example of continuous animation of div tag

In this example, the text in the div tag is animated continuously by using the plug-in. The text is animated by using the bounceIn and flash values of animate.css.

jQuery animate plus

The code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/animate.css" />
<script type="text/javascript" src="js/animate-plus.js"></script>


</head>
<body>

<div class="animate-plus" data-animations="bounceIn,flash" data-animation-repeat="true">An animate-plus plug-in demo</div>
</body>
</html>

So, in the data-animations attribute, you may specify one or more animation values. In order to repeat the animation, the data-animation-repeat value is kept true.

Also, in order to use animate-plus, you have to refer to the animate-plus class in the HTML tag.

Animating a group of elements demo

The added feature enables animation for the group of elements. For example, if you have two div or span tags, you may use the data-animation-group attribute in both tags and create a grouped animation.

jQuery animate group

Example code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/animate.css" />
<script type="text/javascript" src="js/animate-plus.js"></script>


</head>
<body>
<span
    class="animate-plus"
    data-animation-group="grpanimation"
    data-animations="fadeInUp, flip"
    data-animation-order="1,4"
>
    A group animation demo | 
</span>

<span
    class="animate-plus"
    data-animation-group="grpanimation"
    data-animations="fadeInRight, rotateIn"
    data-animation-order="2,3"
>
    Animation No 2
</span>

</body>
</html>

One of the features is, you may set the order of animations by using the data-animation-order attribute.

In the above example, the first <span> tag has two animations: fadeInUp and flip. While its animation order is 1 and 4.

The second span tag is also given two animation values: fadeInRight and rotateIn and the order is 2 and 3.

As the demo page is loaded, the fadeInUp animation will execute for the first <span> element. This will be followed by fadeInRight animation for second <span> element. Then comes the rotateIn for the second <span> tag and finally flip will execute for the first <span> element.

A demo of delaying animation in group elements

Just extending the above demo and adding another option i.e. data-animation-delay. This will delay the animation for the specified element. Take care of the order carefully, for what you want to apply delay for.

See the delay example where the second <span> tag’s animation will start with a gap of 1 and 2 seconds, respectively:

Code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/animate.css" />
<script type="text/javascript" src="js/animate-plus.js"></script>


</head>
<body>
<span
    class="animate-plus"
    data-animation-group="grpanimation"
    data-animations="fadeInUp, flip"
    data-animation-order="1,4"
>
    A group animation demo | 
</span>

<span
    class="animate-plus"
    data-animation-group="grpanimation"
    data-animations="fadeInRight, rotateIn"
    data-animation-order="2,3"
    data-animation-delay="1s,2s"
>
    Animation No 2
</span>

</body>
</html>

A demo of animating elements with scroll

In certain designs, animating a logo or some text as the element becomes visible after scrolling the screen adds a good impression and gets the user’s attention.

You may add this option by using the data-animation-when-visible = “true” attribute.

A div with appropriate height is created for the sake of a demo page showing the vertical scroll bar. As you scroll down, the text in the <span> tag animates. If you go up and scroll down again, the text in span will animate again by using these attributes:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/animate.css" />
<script type="text/javascript" src="js/animate-plus.js"></script>

<style>
.divcls{
    height:700px;
}

</style>

</head>
<body>
<div class="divcls">Scroll down for animating span text</div>

<span
    class="animate-plus"
    data-animations="fadeInRight, rotateIn"
    data-animation-when-visible="true"
    data-animation-reset-offscreen="true"
>
    This text animates as visible on screen
</span>

</body>
</html>

A more practice example – Using with Bootstrap’s navbar

The above examples are simple text animations in the div or span tag. In this example, I am using the top bar of a free theme available on this website, choco-bar, which is based on Bootstrap framework.

For the demo, I am using only the top navbar where the logo area and menu items are given animations by using the animate-plug plug-in. The logo/business name area’s text will keep on animating continuously with a delay of one second.

Whereas, the menu items will animate as the web page loads. A div element is given the height for the vertical scroll bar. As you get down and scroll back on top till menu bar is visible, the menu items will appear with animations again. Have a look at the demo:

jQuery animate boots

See online demo

The code used for the menu bar’s business name and menu items:

<a class="navbar-brand bizname animate-plus" data-animations="zoomIn" data-animation-repeat="true" data-animation-delay="1s" href="#main-carousel">Choco Bar</a>

<div class="collapse navbar-collapse scrollspy smooth-scroll " id="nav-collapse">

<ul class="nav navbar-nav navbar-left animate-plus" data-animations="zoomIn" data-animation-when-visible="true" data-animation-reset-offscreen="true">

<li class="active"><a href="#main-carousel">Home</a></li>

<li ><a href="#specialities">Specialities</a></li>

<li><a href="#custfeedback">Feedback</a></li>

<li><a href="#recipes">Recipes</a></li>

<li><a href="#products">Products</a></li>

<li><a href="#enquiry">Order</a></li>

<li><a href="#">Download Theme</a></li>

</ul>

</div>

See the complete code of navbar of Bootstrap with animations in the demo page’s view source.

Setting up animate-plus plug-in for your web projects

You need to include the .js file of the plug-in (animate-plus.js) in the desired folder and refer it in the <head> or <body> section after jQuery and animate.css file. This is how I referred in demo pages:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>

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

<script type=”text/javascript” src=”js/animate-plus.js”></script>

That’s it!