当元素滚动到视图中时为它们设置动画。

介绍

ScrollReveal 是一个 JavaScript 库，用于在元素进入/离开视口时轻松设置动画。它的设计既坚固又灵活，但希望您在下面会惊讶于它是多么容易上手。

安装

浏览器

一种简单而快速的入门方法是在您的页面中包含此脚本：

<script src="https://unpkg.com/scrollreveal"></script>

这将创建全局变量 ScrollReveal

在生产中使用此方法时要小心。如果不指定固定版本号，Unpkg 可能会在解析最新版本时延迟您的页面加载。在unpkg.com上了解更多信息

Module

npm install scrollreveal

CommonJS

const ScrollReveal = require('scrollreveal')

ES2015

import ScrollReveal from 'scrollreveal'

用法

安装为我们提供了构造函数ScrollReveal()。调用此函数会返回 ScrollReveal 实例，即魔法背后的“大脑”。

ScrollReveal 采用单例模式；无论构造函数被调用多少次，它总是返回相同的实例。这意味着我们可以在任何地方调用它，无需担心。

我们可以用这个实例做很多事情，但大多数时候我们将使用该reveal()方法来创建动画。从根本上说，这是使用 ScrollReveal 的方法：

<h1 class="headline">
    Widget Inc.
</h1>

ScrollReveal().reveal('.headline')

🔎在JSBin上观看此演示

完整的文档可以在https://scrollrevealjs.org找到

如果您使用的是旧版本的 ScrollReveal，您可以在wiki中找到遗留文档

执照

对于商业网站、主题、项目和应用程序，通过购买商业许可证来保持您的源代码私有/专有。

根据 GNU 通用公共许可证 3.0 获得许可，用于兼容的开源项目和非商业用途。

版权所有 2021 裂变有限责任公司