scroll-entrance
v1.0.0
Published
A simple, lightweight JavaScript plugin for subtle scrolling animations.
Downloads
9
Maintainers
andycaygillReadme
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
<script src="PATH-TO-SCRIPT/scroll-entrance.js"></script>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
<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>3. Add the 'data-entrance=' attribute to the elements you want to animate
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="fade-top"
data-entrance="fade-bottom"Advanced Usage:
Delaying a transition
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>Defining custom animations
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; }
Compatibility
Tested in Chrome, Firefox, IE10+, Safari, ios and Andriod