Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jlmakes/scrollreveal
Animate elements as they scroll into view.
https://github.com/jlmakes/scrollreveal
animation css javascript reveal scroll scrollreveal transform transition
Last synced: 4 days ago
JSON representation
Animate elements as they scroll into view.
- Host: GitHub
- URL: https://github.com/jlmakes/scrollreveal
- Owner: jlmakes
- Created: 2014-01-16T17:37:20.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2024-04-05T17:55:48.000Z (8 months ago)
- Last Synced: 2024-06-23T04:58:09.415Z (6 months ago)
- Topics: animation, css, javascript, reveal, scroll, scrollreveal, transform, transition
- Language: JavaScript
- Homepage: https://scrollrevealjs.org/
- Size: 1.09 MB
- Stars: 22,187
- Watchers: 412
- Forks: 2,241
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
- awesome-github-repos - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
- awesome-github-star - scrollreveal
- awesome-list - scrollreveal 滚动入视角的动画
- awesome-frontend-libraries - scrollreveal
- StarryDivineSky - jlmakes/scrollreveal
- awesome - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
- awesome - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
README
Animate elements as they scroll into view.
# Installation
## Browser
A simple and fast way to get started is to include this script on your page:
```html
```
This will create the global variable `ScrollReveal`
> Be careful using this method in production. Without specifying a fixed version number, Unpkg may delay your page load while it resolves the latest version. Learn more at [unpkg.com](https://unpkg.com)
## Module
```bash
$ npm install scrollreveal
```
#### CommonJS
```js
const ScrollReveal = require('scrollreveal')
```
#### ES2015
```js
import ScrollReveal from 'scrollreveal'
```
# Usage
Installation provides us with the constructor function [`ScrollReveal()`](https://scrollrevealjs.org/api/constructor.html). Calling this function returns the ScrollReveal instance, the “brain” behind the magic.
> ScrollReveal employs the singleton pattern; no matter how many times the constructor is called, it will always return the same instance. This means we can call it anywhere, worry-free.
There’s a lot we can do with this instance, but most of the time we’ll be using the [`reveal()`](https://scrollrevealjs.org/api/reveal.html) method to create animation. Fundamentally, this is how to use ScrollReveal:
```html
Widget Inc.
```
```js
ScrollReveal().reveal('.headline')
```
**🔎 See this demo live on [JSBin](http://jsbin.com/jufohaxonu/edit?html,output)**
---
### The full documentation can be found at [https://scrollrevealjs.org](https://scrollrevealjs.org)
> If you’re using an older version of ScrollReveal, you can find legacy documentation in the [wiki](https://github.com/jlmakes/scrollreveal/wiki)
---
# License
**For commercial sites, themes, projects, and applications, keep your source code private/proprietary by purchasing a [Commercial License](https://scrollrevealjs.org/pricing/).**
Licensed under the GNU General Public License 3.0 for compatible open source projects and non-commercial use.
Copyright 2023 Fisssion LLC