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

$3

`html





Js scroll effect






`

$3

#### Javascript

`javascript
import JSE from 'js-scroll-effect';

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

#### Css

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

- Then you make css by yourself in your project.

`Css
@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

`Html


`javascript
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

`Html