Modern Animation Plugin With jQuery And CSS3 - EnlivenTricks.js

Modern Animation Plugin With jQuery And CSS3 - EnlivenTricks.js
File Size: 22.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The EnlivenTricks.js jQuery plugin provides 6 modern animations (fade, shake, scale, swap, loading and morphing) for DOM elements using jQuery and CSS3.

How to use it:

1. Import jQuery library and the EnlivenTricks.js jQuery plugin's files into the html file.

<link rel="stylesheet" href="EnlivenTricks.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="EnlivenTricks.js"></script>

2. Apply a fade animation to an element. Possible parameters:

  • duration: the duration of the animation
  • disappear: removes the element after fade out
  • mode: fade in or fade out
$(".element").EnlivenTricks().fade({
  duration: 500, 
  disappear: false,
  mode: 'in'
})

3. Apply a shake animation to an element. Possible parameters:

  • times: the number of times to shake
  • wrapper: wrapper element
$(".element").EnlivenTricks().shake({
  times: 6
  wrapper: false
})

4. Apply a scale animation to an element on hover.

$(".element").EnlivenTricks().blob()

5. Apply a swap animation to an element. Possible parameters:

  • revert: reverts the animation
  • vertical: makes the animation vertical
  • next: next element to swap
  • callback: callback function
$(".element").EnlivenTricks().swap({
  revert: false, 
  vertical: false, 
  next: null,
  callback: function() {return;}
})

6. Apply a loading animation to an element. Possible parameters:

  • color: animation color
  • appearance: 'square', 'flash', 'disk', 'spinner', 'fixed-spinner', 'classic-spinner', and 'simple'
  • position: custom position
  • delayHandler: interger, 'infinite', or execute a function when loading
$(".element").EnlivenTricks().load({
  color: 'white',
  appearance: 'simple',
  position: { left: '42%', right: 0, bottom: 0, top: 0 },
  delayHandler: 5000
})

7. Morph an icon to another Possible parameters:

  • next: next icon
  • appearance: 'rotate', 'vibrate', 'flip', 'fade', or 'huff'
$(".element").EnlivenTricks().morph({
  // ...
})

Changelog:

2019-01-06

  • Fixing DOM access initialization in MagicTrick

2018-11-28

  • Added morphing animation for icons.

2018-11-21

  • refactoring loader factory
  • [Feature] Initializing icons morphing

2018-11-16

  • refactor

2018-11-15

  • added more loading spinners

2018-11-12

  • [FIX] Decreasing shake times max val

2018-11-11

  • Enlarging spinner loader size
  • Added loading animation.

This awesome jQuery plugin is developed by hupiat. For more Advanced Usages, please check the demo page or visit the official website.