https://github.com/julianschmuckli/scroll-effect
A simple library, where you can flow in the elements when the users would normally see it in the screen.
https://github.com/julianschmuckli/scroll-effect
animatecss effect npm-package scroll
Last synced: 16 days ago
JSON representation
A simple library, where you can flow in the elements when the users would normally see it in the screen.
- Host: GitHub
- URL: https://github.com/julianschmuckli/scroll-effect
- Owner: julianschmuckli
- License: mit
- Created: 2019-02-04T12:19:59.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-09-19T19:45:33.000Z (over 3 years ago)
- Last Synced: 2025-08-09T15:44:15.118Z (6 months ago)
- Topics: animatecss, effect, npm-package, scroll
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/scroll-effect
- Size: 7.81 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Scroll Effect
A simple library, where you can flow in the elements as soon, as the user is scrolling to them.
## Requirements
Before you can start using the library, make sure that you are using the [Animate.css](https://daneden.github.io/animate.css/) library, which provides custom animations. That's the only thing you need.
## How it works
All you need to do is to install the library on your project with
```bash
npm install scroll-effect
```
Then you can simply add to your elements, which you want to flow in later a class called "scroll-effect" and add the inline-style `opacity:0;` or you can add an entry in your CSS where you define the .scroll-effect class as `opacity:0;`. In the end, it looks something like this:
```html
```
As this library uses the [Animate.css](https://daneden.github.io/animate.css/) library to flow in the elements with animations, you can use every animation listed there.
By default, if nothing is defined like the example above, it will use the `fadeIn` animation. If you want to trigger a custom animation, just simply add the attribute `data-animation` and set the value to the animation name.
```html
```
## Data options
You can provide additional information about your element to improve the experience.
Just pass the following data attributes to the element, which uses the `scroll-effect` class.
| data-* | Default | Description | Example |
|--------|---------|-------------|---------|
| animation | fadeIn | The animation name of animate.css, which should be displayed. | fadeInUp, etc. |
| delay | 0 | Add a delay of the animation, controlled via animate.css in **seconds** | 2 |
| offsetFactor | 1.5 | Adds an offset factor, when the animation should be triggered. 2 is in the middle of the screen. 1.5 is in the lower half (triggers earlier), while 3 is in the upper half (triggers later) of the screen. | 3 |
## How to use it in Vue.js
If you want to use this library in Vue.js you only have to insert the following snippet in the App.vue JavaScript section:
```javascript
const ScrollEffect = require("scroll-effect");
document.addEventListener("DOMContentLoaded", function() {
ScrollEffect.init(); //Initialize the scroll effect, when all the DOM elements has been loaded and placed.
});
```