文章/答案/技术大牛

发布

问Scrollreveal.js不应用动画
EN

Stack Overflow用户

提问于 2021-01-02 15:43:24

回答 1查看 91关注 0票数 0

我开始学习scrollreveal.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>

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-01-02 21:03:40

您的代码片段有两个问题：

您正在尝试将2个options对象传递给reveal，但它只需要一个选项对象。这意味着你的台词：

ScrollReveal().reveal('.headline', { origin: 'left' }, { duration: 2000 });

实际上应该是：

ScrollReveal().reveal('.headline', { origin: 'left', duration: 2000 });

如果您签出了文档的origin选项，它将声明：

您需要为options.distance为options.origin分配一个非零值，以便对您的动画产生任何可见的影响。

这意味着，如果您想使用origin，还需要指定一个distance，它将指定元素在显示时将移动多少。这适用于origin，因为元素将从origin指定的方向移动和显示。

我已经修复了您的代码片段，并添加了一个distance of 100px，所以当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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65540958

复制

相似问题

问Scrollreveal.js不应用动画
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Scrollreveal.js不应用动画EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Scrollreveal.js不应用动画
EN