This time I will share jQuery Plugin and tutorial about Move An Element Alone A Motion Path – Johnnys Path, hope it will help you in programming stack.
Johnnys Path is a tiny jQuery based animation library that enable the developers to move any DOM elements at a certain speed along a specified motion path.
How to use it:
1. Load the jQuery Johnnys Path’s main JavaScript after loading jQuery.
1 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
2 |
<script src="/path/to/lib/index.js"></script> |
2. Make sure your element has the position: absolute:
1 |
<div class="box">Element</div> |
3. Override the default options:
d: Duration of the animation. Default: 400ms.
e: Easing function. Default: ‘linear’. For more easing functions, you might need a 3rd library like jQuery UI or jQuery easing.
4. Define the motion path in an array of objects containing the ‘x’ and ‘y’ values.
5. Initialize the plugin to animate the element.
1 |
$(".box").johnnysPath(options, paths); |
6. Execute a function when the animation is finished.
1 |
$(".box").johnnysPath(options, paths,function(){ |
This awesome jQuery plugin is developed by IonicaBizau. For more Advanced Usages, please check the demo page or visit the official website.
