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: 3 months 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 (over 10 years ago)
Default Branch: master
Last Pushed: 2024-02-14T11:45:08.000Z (4 months ago)
Last Synced: 2024-04-04T19:12:59.772Z (3 months ago)
Topics: animation, css, javascript, reveal, scroll, scrollreveal, transform, transition
Language: JavaScript
Homepage: https://scrollrevealjs.org/
Size: 1.09 MB
Stars: 22,077
Watchers: 412
Forks: 2,230
Open Issues: 36
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md

Lists

my-awesome-stars - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
awesome-stars - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
awesome-frontend - scrollReveal.js - 元素进入可视区域自动触发设置好的动画
awesome-frontend-libraries - scrollreveal
awesome-stars - scrollreveal
awesome-stars - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
awesome-stars - scrollreveal - Easy scroll animations for web and mobile browsers. (JavaScript)
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 - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
awesome - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
my-awesome-stars - scrollreveal
awesome-stars-coconut - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
awesome-stars - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
awesome-stars - scrollreveal
awesome-github-star - scrollreveal
awesome-stars - scrollreveal
awesome-stars - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
awesome-stars - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
awesome-stars - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
docsify-awesome-stars - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
awesome - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
awesome-stars - scrollreveal
awesome-stars - scrollreveal - Easy scroll animations for web and mobile browsers. (JavaScript)
awesome-stars - scrollreveal
awesome-stars - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
awesome-stars - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
awesome-stars - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
awesome-stars - jlmakes/scrollreveal - Animate elements as they scroll into view. (JavaScript)
awesome-list - scrollreveal 滚动入视角的动画
awesome-stars - jlmakes/scrollreveal - `★22180` 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