Question

当我滚动到第二页并且不能一次全部运行时，我需要执行运行的动画效果。一个例子是here我需要工作。我是业余爱好者所以请向我解释，以便我能理解。我正在尝试，但所有的动画都是在第一页上运行的，当我在第一页时，我看不到它。对我的学校项目很重要:)感谢您的帮助。

Answer 1

GITHUB

易于使用

下载并在

中实现

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

然后根据上面的教程链接更改课程

<h1 class="animated infinite bounce">Example</h1>

（可以使用这些类）

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

Answer 2

<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
<link rel="stylesheet" href="css/animate.css">
<script>
new WOW().init();
</script>


<div class="wow bounceInLeft animated">
              <h2>animated heading</h2>
</div>

试试这段代码......

this link for more

滚动时如何运行动画效果

2 个答案: