更新记录
0.0.1(2022-11-14)
使用scrollreveal动画库
平台兼容性
HbuilderX/cli最低兼容版本 |
---|
3.4.14 |
uni-app
Vue2 | Vue3 |
---|---|
√ | ? |
app-vue | app-nvue | app-android | app-ios |
---|---|---|---|
? | ? | ? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
快应用-华为 | 快应用-联盟 |
---|---|
? | ? |
uni-app x
app-android | app-ios |
---|---|
? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
Animate elements as they scroll into view.
Introduction
ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up.
Installation
Browser
A simple and fast way to get started is to include this script on your page:
<script src="https://unpkg.com/scrollreveal"></script>
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
Module
npm install scrollreveal
CommonJS
const ScrollReveal = require('scrollreveal')
ES2015
import ScrollReveal from 'scrollreveal'
Usage
Installation provides us with the constructor function ScrollReveal()
. 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()
method to create animation. Fundamentally, this is how to use ScrollReveal:
<h1 class="headline">
Widget Inc.
</h1>
ScrollReveal().reveal('.headline')
🔎 See this demo live on JSBin
The full documentation can be found at https://scrollrevealjs.org
If you’re using an older version of ScrollReveal, you can find legacy documentation in the wiki
License
For commercial sites, themes, projects, and applications, keep your source code private/proprietary by purchasing a Commercial License.
Licensed under the GNU General Public License 3.0 for compatible open source projects and non-commercial use.
Copyright 2021 Fisssion LLC