Perform Actions On Page Scroll – scroll-out

Category: Animation , Javascript , Recommended | September 19, 2018
Author: scroll-out
Views Total: 874
Official Page: Go to website
Last Update: September 19, 2018
License: MIT

Preview:

Perform Actions On Page Scroll – scroll-out

Description:

A lightweight, cross-platform, progressively enhanced JavaScript scroll animation library for the web.

The scroll-out library can be used to animate given elements by toggling and altering attributes and CSS classes on vertical page scrolling.

Dead simple to use and highly customizable.

Basic usage:

Install the scroll-out via NPM.

# NPM
$ npm install scroll-out --save

Import the ScrollOut from the package.

import ScrollOut from "scroll-out";

Or load the compiled version of the scroll-out library in the document.

<script src="/scroll-out.min.js"></script>

Initialize the library and you’re ready to go.

ScrollOut({
  // options here
});

Add the data-scroll attribute to the element you want to animate on scroll.

<div data-scroll>
  Element To Animate
</div>

Animate the element using CSS/CSS3.

[data-scroll] {
  /* CSS Here */
}

[data-scroll="in"] {
  /* CSS Here */
}

[data-scroll="out"] {
  /* CSS Here */
}

Available configuration options.

ScrollOut({

  // If true, all CSS Variables will be added to the scrolling element and all targets. 
  // If false, only the [data-scroll] property will be modified on targets. For more control, see CSS Props Options
  cssProps: true,

  // The distance in pixels from the top to trigger the animation
  offset: 0,

  // Decides whether to execute only once
  once: false,

  // The root element to use when resolving targets
  scope: documentElement,

  // An optional list of elements or a css selector
  targets: '[data-scroll]',

  // The ratio of the element that must be visible before it is marked as visible.
  threshold: .2
  
});

Event handlers.

ScrollOut({

  onShown: function(element, ctx, scrollingElement) {
    /* shown */
  },
  
  onHidden: function(element, ctx, scrollingElement) {
    /* hidden */
  },

  onChange: function(element, ctx, scrollingElement) {
    /* changes visibility */
  }

});

You Might Be Interested In:


Leave a Reply