Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scroll-out/scroll-out
ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects!
https://github.com/scroll-out/scroll-out
animation css css-classes javascript scroll-events scrolling transition
Last synced: 27 days ago
JSON representation
ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects!
- Host: GitHub
- URL: https://github.com/scroll-out/scroll-out
- Owner: scroll-out
- Created: 2017-08-19T20:54:03.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-01-14T16:21:12.000Z (10 months ago)
- Last Synced: 2024-10-01T13:42:22.244Z (about 1 month ago)
- Topics: animation, css, css-classes, javascript, scroll-events, scrolling, transition
- Language: TypeScript
- Homepage: https://scroll-out.github.io/
- Size: 590 KB
- Stars: 1,223
- Watchers: 27
- Forks: 123
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGE.md
Awesome Lists containing this project
- awesome-list - scroll-out - out | 1088 | (TypeScript)
README
# ScrollOut
*Animate on Scroll*
[![npm version](https://badge.fury.io/js/scroll-out.svg)](https://badge.fury.io/js/scroll-out) [![Downloads](https://img.shields.io/npm/dm/scroll-out.svg)](https://www.npmjs.com/package/scroll-out)
[![gzip size](http://img.badgesize.io/https://unpkg.com/scroll-out/dist/scroll-out.min.js?compression=gzip&label=gzip%20size&style=flat&cache=false)](https://unpkg.com/scroll-out/dist/scroll-out.min.js)## Why should I use this?
- Animate or reveal elements as they scroll into view using CSS or JavaScript
- Super tiny JavaScript library at 1KB minified and gzipped.
- Free for commercial and non-commercial use under the MIT license.## How do I use it?
Install ScrollOut and decorate elements with the ```data-scroll``` attribute. As elements become visible, ```data-scroll``` will be set to ```in``` and when elements are scrolled out they will be set with ```out```. Add your own CSS or JS to make a big impression when things come into view. That's it!
## Getting Started
Check out the [documentation](https://scroll-out.github.io/).
## Compatibility
The core features are compatible on all modern desktop and mobile browsers. Internet Explorer 11 is also supported.
## Maintainers
| Maintainer | GitHub | Twitter |
| :- | :- | :- |
| Christopher Wallis | [@notoriousb1t](https://github.com/notoriousb1t) | [@notoriousb1t](https://twitter.com/notoriousb1t) |
| Stephen Shaw | [@shshaw](https://github.com/shshaw) | [@shshaw](https://twitter.com/shshaw) |## License
scroll-out is licensed under the [MIT license](http://opensource.org/licenses/MIT).