Screen Scroll Animations
Many pages now includes pretty animations to some elements when you reach at some point while scrolling through the page, right? If you are wondering how to achieve this easily, here we bring this plug-in to you.
By scrolling through this page, you will encounter some images that will be appearing.
We provide a very simple script that allows to add even your on animations.
So, how does this plug-in works?
-
First, import the jQuery plug-in.
<script src="path/jquery.min.js"></script> -
Secondly, add our plug-in.
<script src="path/WEScrollAnimations.js"></script> -
Initialize the element/s that will have the animation.
$("element").scrollAnimation({ animation: [string], offset: [integer/float], resetAnimation: [boolean], target: [string] });
Options
- element: required. The id, class or element itself you are pointing to. It can point to multiple targets with the same element/class/... name, that will trigger them once the window reached it's position.
- animation: optional. The class name which contains animation. We provide 4 basic animations, bottomToTop, topToBottom, leftToRight and rightToLeft. You can include your own animations. Default animation: bottomToTop.
- offset: optional. The amount of pixels you want to start triggering off. Use minus symbol (-) to make the animation start before reaching the element position. Default: 0.
- resetAnimations: optional. Boolean that if the window position is above the element, it removes the animation and will add it again when the window position is on the desired position. Default: false.
- target: optional. Target an element to add the animation. If not specified, it will target itself.