jQuery Plugin To Handle CSS3 Animations On Any Elements - dreyanim

jQuery Plugin To Handle CSS3 Animations On Any Elements - dreyanim
File Size: 34 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

dreyanim is a lightweight jQuery plugin which makes it easy to apply awesome CSS3 animations on any elements, with configurable animation speed and delay.

Animation types included:

  • 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.

<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.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="js/dreyanim.js"></script>

3. Apply a CSS animation of your choice to desired element:

$('.element').dreyanim({
  animationType : "zoomIn"
})

4. Set the animation speed & delay in milliseconds.

$('.element').dreyanim({
  animationType : "zoomIn",
  animationTime : 300,
  animationDelay : 0,
})

Change log:

2017-01-15

  • Some more bug fixes

2017-01-15

  • Fixed bug

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.