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
- Download: Download ZIP File
- Bower:
bower install scroll-entrance - NPM:
npm install scroll-entrance
<script src="PATH-TO-SCRIPT/scroll-entrance.js"></script>This is required to make sure the elements are hidden while the JavaScript is loading
<style>
/* Ensure elements are hidden while ScrollEntrance is loading */
[data-entrance] { visibility: hidden; }
</style>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.
<style>
/* Ensure elements are hidden while ScrollEntrance is loading */
.js [data-entrance] { visibility: hidden; }
</style>Example:
<div class="panel" data-entrance="fade">
<p>This will fade the element in</p>
</div>You can use the following preset transitions to animate elements into view.
data-entrance="fade"
data-entrance="from-left"
data-entrance="from-right"
data-entrance="from-top"
data-entrance="from-bottom"Add the 'data-entrance-delay' attribute to delay a transition, for example:
<div class="panel" data-entrance="from-left" data-entrance-delay="1000">
<p>This will fade the element in from the left after 1000 milleseconds</p>
</div>-
Set the 'data-entrance' attribute to the name of your animation
<div class="panel" data-entrance="my-custom-animation"> <p>This will animate the element in using a custom animation, defined in your css file</p> </div>
-
Define the behaviour of your custom animation in your css file
/*This is the initial state before animating */ [data-entrance="my-custom-animation"]{ transform: rotate(180deg); opacity: 0; } /*This is the state after animating */ [data-entrance="my-custom-animation"].has-animated{ transform: rotate(0deg); opacity: 1; }
Tested in Chrome, Firefox, IE10+, Safari, ios and Andriod