25+ animations in web elements by using jQuery and CSS3

How to create animation to elements by using dreyanim plug-in

The dreyanim is a jQuery and CSS3 based plug-in for creating the animations to elements like text paragraphs, images or other elements in web pages easily.

You may choose an animation style from the available 25+ animation options by using this plug-in. In the next section, I will show you live demos of creating animations by using this nice plug-in. On the way, you will also learn how to set up this plug-in on your website.

A demo of animating text in div element

After going to the demo page by clicking the link or image below, you can see a paragraph of text along with a dropdown. Simply choose an option from the dropdown which is an animation style. That animation will apply to the text contained in the div element:

jQuery animation dreyanim

See online demo and code

The time of the animation is set as 1000 milliseconds by using the animationTime option of the plug-in. The animation type is set by using the animationType option in the jQuery code as follows:

The jQuery code:

 

You may get the complete code including the markup from the demo page.

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

Step 1:

For setting up this nice plug-in on your website, download it from the developer’s page in Github website from this link. Alternatively, you may also get the dreyanim.css and dreyanim.js files from the demo page after view source.

Step 2:

Include the reference of CSS file in the <head> section and dreyanim.js file before the <body> closing tag and after the jQuery reference.

Step 3:

Use the jQuery code for setting the animation type from the list of available values below. In the above demo, as options of animations are placed in the dropdown so a variable is used in the jQuery code for dynamically applying the selected animation.

You may directly set an animation in jQuery code. See the example in the coming section.

The animation values available

Following is the list of animation values that you may set as using this plug-in:

  • zoomIn
  • zoomOut
  • fadeIn
  • fadeOut
  • slideInFromUp
  • slideInFromDown
  • slideInFromLeft
  • slideInFromRight
  • slideOutToUp
  • slideOutToDown
  • slideOutToLeft
  • slideOutToRight
  • flipIn
  • flipOut
  • flipInAlternate
  • flipOutAlternate
  • fallIn
  • fallOut
  • fallInAlternate
  • fallOutAlternate
  • rotateIn
  • rotateOut
  • wipeInVertical
  • wipeInHorizontal
  • wipeOutVertical
  • wipeOutHorizontal

A demo of image animation with a fixed animation value

In this example rather than using the text, I have used an image for the animation. Also, instead of a dropdown to select an animation type, I have simply set the value in the jQuery code. Have a look:

jQuery animation image

See online demo and code

The complete code of this demo:

 

Set the image path and name with the one that you want to use. Also set different options as per the need in the jQuery code section for animation type from 25+ values, animation speed etc.

A demo of animating a Bootstrap based HTML table

As mentioned earlier, not only you may animate the simple text or images but different elements of a web page. You may also animate forms and even HTML tables as using this plug-in. In this demo, I have created a table based on Bootstrap classes. Again, a dropdown is given below the table with the same options as in the first example.

Just select an option from the Bootstrap select dropdown and that animation will apply to the table element:

jQuery animation table

See online demo and code

The markup:

 

The jQuery code

What I have done is only used the class name of the element in the jQuery code, in that case, it is table class .animation-demo. Similarly, you may use a form or any other element.

You may get the complete table and animation code from the demo page.