How to create an animation to elements by using dreyanim plug-in
The dreyanim is a jQuery and CSS3-based plug-in for creating 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:
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:
<script>
$('#animationOption').on("change",function(){
$animationType = $("#animationOption").val();
$('.animation-demo').dreyanim({
animationType : $animationType,
animationTime : 1000
})
})
</script>
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:
To set up this nice plug-in on your website, download it from the developer’s page on 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:
The complete code of this demo:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/dreyanim/dreyanim.css">
</head>
<body>
<div style="width: 100vw; height: 100vh; display: flex; background-color: #408080; flex-direction: column">
<div style="margin:auto;" class="animation-demo">
<img src="images/aurora.jpg">
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="js/dreyanim/dreyanim.js"></script>
<script>
$animationType = $("#animationOption").val();
$('.animation-demo').dreyanim({
animationType : 'flipInAlternate',
animationTime : 1500
})
</script>
</body>
</html>
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:
Markup/jQuery/CSS:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap basic table example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="css/dreyanim/dreyanim.css">
</head>
<body>
<div class="container ">
<h1>A Bootstrap table</h1>
<table class="table table-bordered table-striped table-hover animation-demo">
<tr class="danger">
<th>Product ID</th>
<th>Product Name</th>
<th>Product Quality</th>
<th>Product Quantity</th>
</tr>
<tr class="info">
<td>1</td>
<td>Wheat</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr class="warning">
<td>2</td>
<td>Rice</td>
<td>Good</td>
<td>250 Bags</td>
<tr class="info">
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr class="warning">
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr class="info">
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
</table>
</div><br /><br />
<div class="col-sm-4">
<select name="Selanimation" class="form-control" id="animationOption" style="display: block; margin: auto">
<option value="zoomIn">zoomIn</option>
<option value="zoomOut">zoomOut</option>
<option value="fadeIn">fadeIn</option>
<option value="fadeOut">fadeOut</option>
<option value="slideInFromUp">slideInFromUp</option>
<option value="slideOutToUp">slideOutToUp</option>
<option value="slideInFromDown">slideInFromDown</option>
<option value="slideOutToDown">slideOutToDown</option>
<option value="slideInFromLeft">slideInFromLeft</option>
<option value="slideOutToLeft">slideOutToLeft</option>
<option value="slideInFromRight">slideInFromRight</option>
<option value="slideOutToRight">slideOutToRight</option>
<option value="flipIn">flipIn</option>
<option value="flipOut">flipOut</option>
<option value="flipInAlternate">flipInAlternate</option>
<option value="flipOutAlternate">flipOutAlternate</option>
<option value="fallIn">fallIn</option>
<option value="fallOut">fallOut</option>
<option value="fallInAlternate">fallInAlternate</option>
<option value="fallOutAlternate">fallOutAlternate</option>
<option value="rotateIn">rotateIn</option>
<option value="rotateOut">rotateOut</option>
<option value="wipeInHorizontal">wipeInHorizontal</option>
<option value="wipeOutHorizontal">wipeOutHorizontal</option>
<option value="wipeInVertical">wipeInVertical</option>
<option value="wipeOutVertical">wipeOutVertical</option>
</select>
</div>
<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="js/dreyanim/dreyanim.js"></script>
<script>
$('#animationOption').on("change",function(){
$animationType = $("#animationOption").val();
$('.animation-demo').dreyanim({
animationType : $animationType,
animationTime : 2000
})
})
</script>
</body>
</html>
What I have done is only use 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.