Js-scroll-effect NPM

Js Scroll Effect

Why JS scroll effect?

Native javascript
Ease to use, ease to custom.
Lightweight and powerful.
Support all web browsers in pc, mobile, tablet.

Install

  $ npm install js-scroll-effect --save

Basic Usage

Native Js

<html>
  <head>
    <link rel="stylesheet" href="/dist/jse.css" />
  </head>

  <body>
    <h1 data-animation>Js scroll effect</h1>

    <script src="/dist/jse.js"></script>
    <script>
      JSE.init();
    </script>
    <body></body>
  </body>
</html>

ES6

Javascript

import JSE from 'js-scroll-effect';

window.addEventListener('DOMContentLoaded', () => {
  // init scroll effect to all page
  JSE.init();
});

Css

  @import '~/node_modules/js-scroll-effect/dist/jse.css';

Then you make css by yourself in your project.

  @keyframes myCustomEffect {
    from {
      opacity: 0;
      transform: translateY(50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

Then put your keyframes name to data-animation-name in your html element attribute.
Some default keyframes already in css file:
- fadeIn
- fadeInUp
- fadeInDown
- fadeInLeft
- fadeInRight

Html

  <div class="container">
    <div data-animation>Default scroll effect is fadeInUp</div>
    <div data-animation data-animation-name="myCustomEffect">Use your custom effect</div>
  </div>

Custom

Javascript options

import JSE from 'js-scroll-effect';

window.addEventListener('DOMContentLoaded', () => {
  // init scroll effect to all page
  const myElements = Array.from(document.querySelectorAll('.my-element'));
  JSE.init(myElements);
});

Html data attributes

If you are using javascript options above so data-animation is unnecessary in your html element.

Attribute	Default	Required
`data-animation`		`required`
`data-animation-name`	`fadeInUp`	`optional`
`data-animation-duration`	`500ms`	`optional`
`data-animation-delay`	`300ms`	`optional`
`data-animation-fill-mode`	`forwards`	`optional`

Examples

  <div class="container">
    <h1 data-animation data-animation-name="myCustomEffect" data-animation-duration="1000ms" data-animation-delay="500ms">Use data attributes to control your effect</h1>
  </div>