Modern Animation Plugin With jQuery And CSS3 - EnlivenTricks.js

Modern Animation Plugin With jQuery And CSS3 - EnlivenTricks.js

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

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').FadeTrick({
  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').ShakeTrick({
  times: 6
  wrapper: false
})

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

$('.element').BlobTrick()

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').SwapTrick({
  revert: false, 
  vertical: false, 
  next: null,
  callback: function() {return;}
})

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

  • Publication date: 06.11.2018
  • Source