72

0

ScrollReveal

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

滚动显示

滚动显示

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

构建状态 每月下载量 版本 5.7 kB 最小+gzip GPLv3 许可证

介绍

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 裂变有限责任公司