scrollReveal.js 不工作

Question

我使用的代码与 THIS codepen 使用的代码完全相同，而且我的图像在我的视口中时仍然没有淡入。

我在控制台中没有收到任何错误，所以我不知道为什么它在 codepen 中可以完美运行，但当我尝试这样做时却不行。

HTML

<body>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>
<div class="wrap-games">
    <div class="game"></div>
    <div class="game"></div>
</div>

<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.0.9/scrollreveal.min.js"></script>

</body>

js

$(document).ready(function() {
window.sr = ScrollReveal();
sr.reveal('.game');
});

还有一些基本的css..

Answer 1

在 CodePen 中，单击右下角的 'Export' 按钮下载一个可用的非 CodePen 版本。您需要在您的 head 标签中包含 CSS ，您没有包含在您的问题中。

您也不需要 JQuery $(document).ready()，但如果您坚持使用它，您还需要将 JQuery 作为脚本包含在 [=17] =].

scrollReveal.js 不工作

scrollReveal.js not working

javascript

jquery

scrollreveal.js