Vanilla Scroll Appear

A simple Vanilla JS library to reveal elements on vertical scroll (1.2 KB minified and gzipped, no dependencies).

Installation

npm

Install the package:

$ npm install --save scroll-appear

Import the class:

import ScrollAppear from "scroll-appear";

HTML script tag

Download the lib/scroll-appear.min.js file and include it in your HTML:

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

Usage

In your HTML, set a data-appear-offset attribute to your elements and choose an "appearing" class.

In your JavaScript, instantiate the ScrollAppear class:

new ScrollAppear(".appear");

By default, an hidden class will be added/removed whenever the scroll reaches the given offset. Read the Configuration section to change this class name.

Integer offset

<button data-appear-offset="800" class="appear hidden">Appearing button</button>

Element based offset

<button data-appear-offset="#element+100" class="appear hidden">Appearing button</button>

Uses (#element's height + 100) as offset.

Operators available: + - / *

Configuration

The ScrollAppear class accepts an options hash as second argument. Available options:

Option	Type	Default	Description
`defaultToggleClass`	string	`hidden`	Name of the added/removed class when the element scroll offset is reached/unreached.

Some data attributes are also available for the DOM elements:

Option	Type	Default	Description
`data-appear-offset`	integer, string	null (required)	Whenever the scroll height is equal to this value, the default class (`hidden` if not changed in global options) is removed.
`data-appear-toggle-class`	string	null	Name of the added/removed class when the element scroll offset is reached/unreached. Overrides the global options.

Browser Compatibility

Chrome 24+
Safari 6.1+
iOS Safari 7.1+
Firefox 23+
Opera 15+
IE10+

Development

Clone this repo
npm install
gulp or gulp watch if you prefer to launch a livereload server

Provide feedback

Saved searches

Use saved searches to filter your results more quickly