jQuery rotate animation using CSS3 transform: 4 demos
The rotate animation by using CSS3 and jQuery
The jQuery rotate plug-in can be used for creating animations in different elements of the web page including images, icons or other elements quite easily.
This is a light-weight plug-in, only 1Kb of JS file. So, if you are already using jQuery in web project then creating rotating animations is quite easy by including a simple JS file.
Have a look at demos in the following section where you may see and get the code.
A demo of animating image
In this demo, an image is used for jQuery / CSS3 animation. The plug-in uses CSS 3 transform property where the degree of rotation is specified as per option’s value given in the jQuery code.
You may use easing option for specifying the type of animation as well. Have a look:
See online demo and code
Apart from jQuery and jQuery-easing JS files, you only need to include the JS file of the plug-in above the </body> tag:
<script src=”http://code.jquery.com/jquery-2.2.3.min.js”></script>
<script src=”http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js”></script>
<script src=”js/jquery-rotate/rotate.js”></script>
The markup is simple:
|
1 2 3 4 5 6 7 |
<div> <p>Click the image</p> <img id="animate-demo1" src="images/donut.png" alt="CSS 3 animation"> </div> |
Just use the ID used in <img> tag in the jQuery code where animation in jQuery is initiated along with specifying different options:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<script> $('#animate-demo1').on('click', function () { if (!$(this).is(':animated')) { $(".complete").remove(); $(this).after("<div class='ani-status'>The image is animating</div>"); } $(this).rotate(-1500, { duration: 1500, easing: 'easeOutExpo', complete: function() { $(".ani-status").remove(); $(this).after("<div class='complete'>Animation is done!</div>"); } }); }); </script> |
The code specifies the type of easing i.e. easeOutExpo. You may use different; the list can be seen here. Besides, duration of the animation and rotate values are also set. The rotate value is used by CSS 3 transform property in the plug-in JS file.
A demo with different ease and animated values
In this example, using the same image as above but with different values for duration, rotate and easing. The easing value is swing, the duration is 3000 milliseconds and CSS 3 rotate is 3000.
See online demo and code
The script used is:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<script> $('#animate-demo2').on('click', function () { if (!$(this).is(':animated')) { $(".complete").remove(); $(this).after("<div class='ani-status'>The image is animating</div>"); } $(this).rotate(1500, { duration: 3000, easing: 'swing', complete: function() { $(".ani-status").remove(); $(this).after("<div class='complete'>Animation is done!</div>"); } }); }); </script> |
A demo of rotating text to vertical angle
As mentioned earlier, you may not only use images but other elements of the web page by using rotate jQuery/CSS 3 plug-in. In this demo, some text with shadow effect is created with Bootstrap classes.
The text is rotated to 270 degrees angle, so it will be vertical at the end. The duration is kept two seconds for the animation to complete.
See online demo and code
The markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container"> <p>Click on text</p> <div class="row" id="animate-demo3"> <div class="col-md-8"> <span class="shadow-effects">Text Rotate</span> </div> </div> </div> |
The script:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<script> $('#animate-demo3').on('click', function () { if (!$(this).is(':animated')) { $(".complete").remove(); $(this).after("<div class='ani-status'>The text is animating</div>"); } $(this).rotate(270, { duration: 2000, easing: 'swing', complete: function() { $(".ani-status").remove(); $(this).after("<div class='complete'>Animation is done!</div>"); } }); }); </script> |
Get the complete code, including style from the demo page.
In this example, animated button based on Bootstrap classes are created. As you click any button, it will rotate by using the rotate plug-in. Different buttons are given different options and values for duration, easing, and angle:
See online demo and code
As buttons are using the icons from the font-awesome library, its CSS file is included in the <head> section.
Get the complete code from the demo page.
Credit: clarketm