Skip to content
♢ Dead simple elements in viewport detection.
JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc Initial version Jan 20, 2019
.editorconfig Initial version Jan 20, 2019
.gitignore Add module to package.json Feb 10, 2019
license Initial version Jan 20, 2019
package.json Fix dataset camelcase Jun 20, 2019
readme.md Add call event May 13, 2019
rollup.config.js Add rollup to build cjs and esm files Feb 10, 2019

readme.md

modularScroll

Dead simple elements in viewport detection.

Installation

npm install modularscroll

Why

  • Simple
  • Lightweight
  • High performance
  • No dependencies

Usage

import modularScroll from 'modularscroll';

this.scroll = new modularScroll();
<h1 data-scroll>Hello</h1>
<p data-scroll>Text</p>

With options

import modularScroll from 'modularscroll';

this.scroll = new modularScroll({
    el: document,
    name: 'scroll',
    class: 'is-inview',
    offset: 0,
    repeat: false
});
<h1 data-scroll data-scroll-repeat>Hello</h1>
<p data-scroll data-scroll-offset="60">Text</p>

With methods

import modularScroll from 'modularscroll';

this.scroll = new modularScroll();

this.scroll.update();

With events

import modularScroll from 'modularscroll';

this.scroll = new modularScroll();

this.scroll.on('call', (func) => {
    this.call(...func); // Using modularJS
});
<div data-scroll data-scroll-call="function, module">Trigger</div>

Options

Option Type Default Description
el object document Scroll container element.
name string 'scroll' Data attributes name.
class string 'is-inview' Elements in-view class.
offset number 0 In-view trigger offset.
repeat boolean false Repeat in-view detection.

Attributes

Attribute Values Description
data-scroll Detect if in-view.
data-scroll-class string Element in-view class.
data-scroll-offset number Element in-view trigger offset.
data-scroll-repeat true, false Element in-view detection repeat.
data-scroll-call string Element in-view trigger call event.

Methods

Method Description
init() Reinit the scroll.
update() Update elements position.
destroy() Destroy the scroll events.

Events

Event Arguments Description
call func Trigger if in-view. Returns your string or array if contains ,.
You can’t perform that action at this time.