On Scroll Animation Library

About

This is a small snippet, that provides on scroll animation.
It can be used on any element with any css animation.

This plugin is designed for scrollable containers.
If your entire document is scrolled you can still use this by setting the body to screen size and giving it an ID.

Tutorial

Installation

1. Copy the reveal-on-scroll.js or reveal-on-scroll.min.js to your directrory.
2. Include it in your HTML document
3. Include one of the given css animations in your css or use your own css animation.

Use

To create a new OnScroll effect use: var yourOnScroll = new OnScroll();
You can change the parameters as follows:

• Animation Duration:
  Default: 1 second
  Change: 3rd parameter on creation or yourOnScroll.duration = yourDuration;
• Animation Name:
  Default: 'revealOnScroll'
  Change: 4th parameter on creation or yourOnScroll.animation = yourAnimationName;
• Class of the animated elements:
  Default: 'revealOnScroll'
  Change: 1st parameter on creation or yourOnScroll.setElementsClass('your class name');
• Id of the container, thats being scrolled:
  Default: 'main'
  Change: 2nd parameter on creation or yourOnScroll.setParent('your container Id');

If your elements are not direct children of the scrolled container and one or more containers in between (in the DOM hirachy) of the scrolled container and the element, use yourOnScroll.z_index(number).
Number specifies the number of containers in between that are NOT positioned static.
If you don’t know if this is the case, try without using this property.

After all parameters have been set, call yourOnScroll.onScrollDetected(); to check whether there are animated elements visible on startup and animate them.

Examples

• This will animate all elements in the revealOnScroll class, when you scroll in the container with id main.
  

  var ros = new OnScroll();
  ros.onScrollDetected();

• All parameters have been initially changed.
  

  var ros = new OnScroll('elementClass', 'containerId', 2, 'animationName');
  ros.onScrollDetected();

• All parameters have been changed afterwards.
  

  var ros = new OnScroll();
  ros.setParent('containerId');
  ros.animation = 'animationName';
  ros.setElementsClass('elementClass');
  ros.duration = 2;
  ros.onScrollDetected();

FAQ