Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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. Installation

  • Download: Download ZIP File
  • Bower: bower install scroll-entrance
  • NPM: npm install scroll-entrance

2. Include the script in your HTML file

<script src="PATH-TO-SCRIPT/scroll-entrance.js"></script>

3. 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>

4. 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="from-top"
data-entrance="from-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

  1. 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>
  2. 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

About

Scroll Entrance Javascript Plugin

Resources

License

Packages

No packages published
You can’t perform that action at this time.