我开始使用滚动显示.js。但是当我将脚本与 html 文件链接时，我在脚本中所做的修改不适用。我总是得到默认动画。我试图把我的脚本放在正文中，它没有改变任何东西。 这是我的Javascript和HTML代码：
ScrollReveal().reveal('.headline',{ origin: 'left' }, { duration: 2000 });<body>
<h1 class="headline">HELLO WORLD</h1>
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
<script src="/scroller.js"></script>
</body>您的代码段有两个问题：
- 您正在尝试将 2 个选项对象传递给
reveal但只需要一个。这意味着您的生产线：
ScrollReveal().reveal('.headline', { origin: 'left' }, { duration: 2000 });
实际上应该是：
ScrollReveal().reveal('.headline', { origin: 'left', duration: 2000 });
- 如果您查看
origin选项的文档，它会指出：
您需要为选项分配一个非零值，以便选项.原点对动画产生任何可见的影响。
这意味着如果你想使用origin，你还需要指定一个distance该该将指定元素在显示时将移动多少。这与origin有关，因为元素将从origin指定的方向移动并显示。
我已经修复了您的代码段并添加了distance100px，因此当显示h1时，它会从左侧100px。
ScrollReveal().reveal('.headline', { duration: 2000, origin: 'left', distance: '100px' });<script src="https://unpkg.com/scrollreveal@4.0.7/dist/scrollreveal.js"></script>
<h1 class="headline">Widget, Inc.</h1>