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

Category: Animation , Javascript | October 7, 2020
0 Comment
Demo Download
Author:Twikito
Views Total:834 views
Official Page:Go to website
Last Update:October 7, 2020
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>

Remove the CSS class instead when the element is outside of the viewport. Defaults to ‘is-inside’.

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

Override the default attributes:

<html data-onscroll-effect-custom-prefix="my-prefix">

API methods.

// initialize
window.onScrollEffect();
// check if is in the viewport
window.onScrollEffect.isInsideViewport( Node );
// check if the animation is repeating
window.onScrollEffect.isRepeating( Node );
// get the count of animation iteration
window.onScrollEffect.repeatingCount( Node );

Changelog:

v1.3.1 (10/07/2020)

  • update

v1.3.0 (10/07/2020)

  • Now you can fill the data-scroll attributes with as many classes as you need, so it’s compatible with any CSS framework. If you leave it empty, the class is-outside will be used by default.
  • Now you can test if an element is isInsideViewport, isRepeating or get repeatingCount.

v1.2.1 (09/14/2020)

  • Updated

v1.2.0 (02/13/2020)

  • Allows to reverse, remove class when outside viewport

10/19/2019

  • v1.1.6

02/26/2019

  • v1.1.3: bugfix

See Also:

You Might Be Interested In:

Leave a Reply