scroll-triggers

WebJar for scroll-triggers

License

License

MIT
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

scroll-triggers
Last Version

Last Version

4.4.0
Release Date

Release Date

Type

Type

jar
Description

Description

scroll-triggers
WebJar for scroll-triggers
Project URL

Project URL

https://www.webjars.org
Source Code Management

Source Code Management

https://github.com/firstandthird/scroll-triggers

Download scroll-triggers

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/scroll-triggers/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>scroll-triggers</artifactId>
    <version>4.4.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/scroll-triggers/
implementation 'org.webjars.npm:scroll-triggers:4.4.0'
// https://jarcasting.com/artifacts/org.webjars.npm/scroll-triggers/
implementation ("org.webjars.npm:scroll-triggers:4.4.0")
'org.webjars.npm:scroll-triggers:jar:4.4.0'
<dependency org="org.webjars.npm" name="scroll-triggers" rev="4.4.0">
  <artifact name="scroll-triggers" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='scroll-triggers', version='4.4.0')
)
libraryDependencies += "org.webjars.npm" % "scroll-triggers" % "4.4.0"
[org.webjars.npm/scroll-triggers "4.4.0"]

Dependencies

compile (3)

Group / Artifact Type Version
org.webjars.npm : attrobj jar [3.1.0,4)
org.webjars.npm : domassist jar [2.2.0,3)
org.webjars.npm : tinybounce jar [1.2.0,2)

Project Modules

There are no modules declared in this project.

scroll-triggers npm

A tiny, dependency-less javascript library to add classes as elements scroll into viewport.

Features

  • Add a class when an element comes into view (great for animations)
  • Set an image when an element comes into view (great for lazy loading)
  • Set the width of an element based on scroll % (great for scroll progress bars)
  • API for both HTML and Javascript

Install

npm install scroll-triggers

Setup

import 'scroll-triggers';

// alternative
import scrollTriggers from 'scroll-triggers';

Events

Custom events are fired/listened on the element:

Event Type Description
scrolltriggers:inView Fired Element is in view
scrolltriggers:outOfView Fired Element is out of view
scrolltriggers:pause Listened Pauses scroll-triggers
scrolltriggers:resume Listened Resumes scroll-triggers

Options

List of available options:

Name Type Description
className {string} Class to be added/removed when element is in view
start {string|Element|NodeList} CSS Selector Add class when the specified element is in view
end {string|Element|NodeList} CSS Selector Removes class when the specified element is in view
position {string = 'bottom'} "top|middle|bottom" Add class at when element hits the specified position of page
positionEnd {string = 'bottom'} "auto|top|middle|bottom" Removes class when specified element hits the specified position of page
offset {number} The offset controls the distance (negative or positive) between the top border of the element and the top border of the window. This is useful to fine tune when a class is added.
image {string} Path to image Set an image when an element comes into view, if the element is an it will set it as the src, otherwise it will be set as background-image
src {string} Path to resource Set the src property when an element comes into view
srcset {string} Path to resource Set the srcset property when an element comes into view
progress {boolean = false} Set the width of an element based on scroll %
once {boolean = true} Whether scroll-triggers should be executed once or not
fixed {boolean = true} Needed for fixed (position: fixed) elements
inView {function} Callback executed when element is in view
outOfView {function} Callback executed when element is out view

Usage

See the example.

HTML

Add class when element is in view.

<div data-scroll data-scroll-class="class-to-add"></div>

Add class when another element is in view

<div data-scroll data-scroll-class="class-to-add" data-scroll-start=".some .selector"></div>

Add class when another element is in view and remove when it gets to another element

<div data-scroll data-scroll-class="class-to-add" data-scroll-start=".some .selector" data-scroll-end=".some .lower .selector"></div>

Add class at when element hits bottom of page

<div data-scroll data-scroll-class="class-to-add" data-scroll-position="bottom"></div>

Add class at when element hits middle of page

<div data-scroll data-scroll-class="class-to-add" data-scroll-position="middle"></div>

Set an image when an element comes into view as a background image

<div data-scroll data-scroll-image="/path/to/image.jpg"></div>

<!--
  This will generate the markup below:
  <div data-scroll data-scroll-image="/path/to/image.jpg" style="background-image: url('/path/to/image.jpg'); background-repeat: no-repeat;"></div>
-->

Set the width of an element based on scroll % (great for progress bars)

<div data-scroll data-scroll-progress></div>

Set the src property when an element comes into view (great for lazy load)

<iframe data-scroll data-scroll-src="https://wikipedia.org/wiki/Main_Page"/></iframe>

Set the srcset property when an element comes into view (great for lazy load)

<picture>
  <source media="(min-width: 650px)" data-scroll data-scroll-srcset="http://placehold.it/465x465?text=Min-650" />
</picture>

JavaScript

import scrollTriggers from 'scroll-triggers';

scrollTriggers([
  {
    el: '.some-selector',
    start: '.selector',
    end: '.selector',
    className: 'class-to-add',
    image: 'image/path.jpg',
    src: 'http://url-to-resource.com',
    srcSet: 'http://url-to-resource.com',
    position: 'top|middle|bottom',
    positionEnd: 'auto|top|middle|bottom',
    offset: -20,
    progress: true|false,
    once: true|false,
    fixed: true|false,
    inView: (el, options) => {},
    outOfView: (el, options) => {}
  }
]);
org.webjars.npm

First+Third

We build things... awesome things.

Versions

Version
4.4.0