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 nametodata-animation-namein your html element attribute. -
Some default keyframes already in css file:
fadeInfadeInUpfadeInDownfadeInLeftfadeInRight
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-animationis 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>