Scroll Entrance
Scroll Entrance is a lightweight JavaScript plugin to animate elements as the are scrolled into view, no jQuery required.
A demo of the plugin is available here
Basic Usage:
1. Include the script in your HTML file
2. Add required CSS in the <head> of your page
This is required to make sure the elements are hidden while the JavaScript is loading
Note: It is recommended you use detect for JavaScript using Modernizr and add the .js css, this will ensure the elements aren't hidden if JavaScript is disabled.
3. Add the 'data-entrance=' attribute to the elements you want to animate
Example:
This will fade the element inYou can use the following preset transitions to animate elements into view.
data-entrance="fade"data-entrance="from-left"data-entrance="from-right"data-entrance="fade-top"data-entrance="fade-bottom"Advanced Usage:
Delaying a transition
Add the 'data-entrance-delay' attribute to delay a transition, for example:
This will fade the element in from the left after 1000 millesecondsDefining custom animations
-
Set the 'data-entrance' attribute to the name of your animation
This will animate the element in using a custom animation, defined in your css file -
Define the behaviour of your custom animation in your css file
/*This is the initial state before animating */[/*This is the state after animating */[
Compatibility
Tested in Chrome, Firefox, IE10+, Safari, ios and Andriod