2.2.4 • Published 5 years ago
js-scroll-effect v2.2.4
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
todata-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>
2.2.4
5 years ago
2.2.3
5 years ago
2.2.2
5 years ago
2.2.1
5 years ago
2.2.0
5 years ago
2.1.9
5 years ago
2.1.8
5 years ago
2.1.7
5 years ago
2.1.6
5 years ago
2.1.5
5 years ago
2.1.4
5 years ago
2.1.3
5 years ago
2.1.2
5 years ago
2.1.1
5 years ago
2.1.0
5 years ago
2.0.9
5 years ago
2.0.8
5 years ago
2.0.7
5 years ago
2.0.6
5 years ago
2.0.5
5 years ago
2.0.4
5 years ago
2.0.3
5 years ago
2.0.2
5 years ago
2.0.1
5 years ago
2.0.0
5 years ago
1.1.6
5 years ago
1.1.5
5 years ago
1.1.4
5 years ago
1.1.3
5 years ago
1.1.2
5 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago