Question

我想创建一个带滚动页面的动画，所以我使用AnimTrap CSS创建了一个javascript。所以我尝试使用此代码包含animscroll.js

<head>
<title>AnimTrap Example</title>
<link href="external_css/animtrap.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="external_css/anim-effect.js"></script>
<script src="external_css/anim-scroll.js"></script>
<script>
ANIMSCROLL.init({
    easing: 'ease-in-out-sine'
});
</script>
</head>

然后我在body标签下尝试了这个代码。但是没有工作

<body>
<div class="animscroll-item" data-animscroll="fade-up"> example </div>
</body>

Answer 1

包含AnimTrap js和CSS文件后，你应该在body标签中写一个滚动动画标签然后你应该写你的页脚标签或身体标签之后。所以你可以试试这个

<head>
<title>AnimTrap Example</title>
<link href="external_css/animtrap.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="external_css/anim-effect.js"></script>
<script src="external_css/anim-scroll.js"></script>
</head>

<body>
<div class="animscroll-item" data-animscroll="fade-up"> example </div>
</body>

然后编写小javascript来调用anim-scroll，就像这样

<script>
ANIMSCROLL.init({
    easing: 'ease-in-out-sine'
});
</script>

如何在页面滚动中使用Animtrap CSS

1 个答案: