This time I will share jQuery Plugin and tutorial about jQuery Plugin To Handle CSS3 Animations On Any Elements – dreyanim, hope it will help you in programming stack.
dreyanim is a lightweight jQuery plugin which makes it easy to apply awesome CSS3 animations on any elements, with configurable animation speed and delay.
- ZoomIn
- ZoomOut
- FadeIn
- FadeOut
- SlideInFromUp
- SlideInFromDown
- SlideOutToLeft
- SlideInFromRight
- SlideOutToUp
- SlideOutToDown
- SlideOutToLeft
- SlideOutToRight
- FlipIn
- FlipOut
- FlipInAlternate
- FlipOutAlternate
- FallIn
- FallOut
- FallInAlternate
- FallOutAlternate
- RotateIn
- RotateOut
- wipeInHorizontal
- wipeOutHorizontal
- wipeInVertical
- wipeOutVertical
How to use it:
1. Load the core CSS library dreyanim.css in the header of the webpage that provides more than 22+ awesome CSS3 based animations just like the familiar Animate.css.
1 |
<link rel="stylesheet" href="css/dreyanim.css"> |
2. Load JQuery library and the JavaScript file dreyanim.js at the end of the document to improve the page load time.
1 |
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> |
2 |
<script src="js/dreyanim.js"></script> |
3. Apply a CSS animation of your choice to desired element:
1 |
$('.element').dreyanim({ |
2 |
animationType : "zoomIn" |
4. Set the animation speed & delay in milliseconds.
1 |
$('.element').dreyanim({ |
2 |
animationType : "zoomIn", |
Change log:
2017-01-15
2017-01-15
2017-01-09
- Added the wipe animations
This awesome jQuery plugin is developed by christiandrey. For more Advanced Usages, please check the demo page or visit the official website.
