Toggle CSS Classes When An Element Is Scrolled Into View – onscroll-effect

Category: Animation , Javascript | October 19, 2019
Author: Twikito
Views Total: 1,273
Official Page: Go to website
Last Update: October 19, 2019
License: MIT

Preview:

Toggle CSS Classes When An Element Is Scrolled Into View – onscroll-effect

Description:

The onscroll-effect JavaScript library that automatically adds or remove CSS classes from a given element when you scroll down/up the webpage.

Ideal for animating elements using CSS3 properties when they’re scrolled into view.

How to use it:

Install & download.

# NPM
$ npm install onscroll-effect --save

Import the onscroll-effect.

import "onscroll-effect";

Or include the ‘onscroll-effect.min.js’ script at the bottom of the webpage.

<script src="/dist/onscroll-effect.es6.min.js"></script>

Add the ‘data-scroll’ attribute to the target element.

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

By default, the library automatically adds the class ‘.is-outside’ to the element when it is outside of the viewport. So that you can apply your own CSS animations to the element once it is scrolled into view.

.is-outside::before {
  transform: translateY(10em);
}

You’re allowed to use a custom CSS class instead of  ‘.is-outside’.

<div data-scroll="your own class"> 
  Element To Animate
</div>

Determine whether to not to repeat the animation.

<div data-scroll="your own class"
     data-scroll-repeat="true"> 
     Element To Animate
</div>

<div data-scroll="your own class"
     data-scroll-repeat="5"> 
     Element To Animate
</div>

Set the distance from the top to trigger the animation.

<div data-scroll="your own class"
     data-scroll-repeat="true"
     data-scroll-offset="100"> 
     Element To Animate
</div>

Changelog:

10/19/2019

  • v1.1.6

02/26/2019

  • v1.1.3: bugfix

You Might Be Interested In:


Leave a Reply