Hit enter after type your search item

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 sued animate.css plug-in for creating animations in different elements that used different effects like bounceIn, bounceOut etc. However, only single animation can be applied by using that CSS plug-in.

In this tutorial, I will show you applying 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 in 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

See online demo and code

The markup:

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

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 the animate-plus class in the HTML tag.

Animating a group of elements demo

The added feature is enabling 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. See a demonstration below:

jQuery animate group

See online demo and code

The example code:


 

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

For example, in 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>. Then comes the rotateIn for 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 second <span> tag’s animation will start with the gap of 1 and 2 seconds, respectively:

See online demo and code

See the complete code and demo by clicking the above links.

A demo of animating element with scroll

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

You may add this option by using the data-animation-when-visible = “true” attribute. See a demo online:

See online demo and code

A div with appropriate height is created for the sake of 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:


 

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 in this website, choco-bar, which is based at 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 the delay of one second.

Whereas, the menu items will animate as web page loads. A div element is given the height for 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 and code

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


 

 

See the complete code of navbar of Bootstrap with animations in 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!

This div height required for enabling the sticky sidebar