This time I will share jQuery Plugin and tutorial about Handling CSS Based Animations Using JavaScript – ripley, hope it will help you in programming stack.
ripley is a super tiny JavaScript plugin to handle CSS powered animations by toggling given CSS properties with configurable easing function, transition delay, and animation speed.
How to use it:
1. Load the JavaScript ripley.js in the document (jQuery is optional).
2 |
<script src="ripley.js"></script> |
4 |
<script src="jquery.js"></script> |
5 |
<script src="ripley.js"></script> |
2. Initialize the plugin on the target element and define the CSS property & value for the animation.
2 |
let rply = new Ripley(document.querySelector('#element')); |
3 |
rply.animate('opacity', '0.25'); |
6 |
$('#element').ripley('opacity', '0.25'); |
3. Customize the animation speed in seconds.
02 |
let rply = new Ripley(document.querySelector('#element')); |
03 |
rply.animate('opacity', '0.25',{ |
08 |
$('#element').ripley('opacity', '0.25',{ |
4. Apply an easing function to the animation.
02 |
let rply = new Ripley(document.querySelector('#element')); |
03 |
rply.animate('opacity', '0.25',{ |
08 |
$('#element').ripley('opacity', '0.25',{ |
5. Set the time to wait before triggering the animation.
02 |
let rply = new Ripley(document.querySelector('#element')); |
03 |
rply.animate('opacity', '0.25',{ |
08 |
$('#element').ripley('opacity', '0.25',{ |
Changelog:
2020-04-24
This awesome jQuery plugin is developed by adamwjohnson5. For more Advanced Usages, please check the demo page or visit the official website.
