https://github.com/dinhlongviolin1/appear-on-scroll-library
Simple appear on scroll CSS-based library
https://github.com/dinhlongviolin1/appear-on-scroll-library
appear appear-event appear-on-scroll library reveal-on-scroll scroll
Last synced: 5 months ago
JSON representation
Simple appear on scroll CSS-based library
- Host: GitHub
- URL: https://github.com/dinhlongviolin1/appear-on-scroll-library
- Owner: dinhlongviolin1
- License: mit
- Created: 2020-03-30T18:59:31.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-30T19:16:18.000Z (about 6 years ago)
- Last Synced: 2025-06-03T20:16:38.684Z (about 1 year ago)
- Topics: appear, appear-event, appear-on-scroll, library, reveal-on-scroll, scroll
- Language: HTML
- Size: 16.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# appear-on-scroll-library
Simple appear on scroll CSS-based library
## What is this?
Simple Appear/Reveal on scroll library by changing element opacity.
JS toggle classes on element depending on current scroll position.
## How to use this library?
* Add `aos.css` and `aos.js` into your html file.
* Add class `appear-on-scroll` to your desired element.
## Customizing this library
There are two attributes that can be modified in the js file: `repeat` and `elementOffset`.
* `repeat`: the default value is `true`. By changing this attribute to false, the appear animation will happen only once when the element is in scroll view.
* `elementOffset`: the amount of offset from the bottom of the screen to the top position of the element when it appears. The default value is `vh / 6`.
### An example file has been inluded.