如何检测页面滚动并执行动画

最新推荐文章于 2024-06-13 09:33:12 发布

Jartto

最新推荐文章于 2024-06-13 09:33:12 发布

阅读量549

点赞数 1

本文链接：https://blog.csdn.net/Jartto/article/details/106681570

版权

本文介绍了如何在H5页面中实现滚动交互动画。通过使用animate.css库和监听滚动事件，可以为页面的section单独执行动画。文章讨论了如何在滚动到特定section时触发动画，以及使用jQuery Smoove插件实现section进入和离开视口时的动画效果。

摘要由CSDN通过智能技术生成

H5页面动画，在推广运营中应用的相当广泛。越是酷炫的动画，越能吸引用户。动画当然算是比较重要的一个环节，除此之外不得不提到的就是－动画滚动交互效果。

一、每个section怎样单独执行动画？

首先，引入动画库，这里我们使用animate.css（传送门）

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

请注意：如果你只用了少量动画效果，请直接拷贝具体动画代码，而不再引入整个动画库。

其次，像往常一样编写你的html代码：

<section  id="wan_banner">
  <div class="warp">
    <div id="left" class="animate">
      <div class="pos bounce_in_down">
        <h3>α Space 物联网基站</h3>
        <i>革命性通信技术</i>
        <i>超低功耗传感器网络基站</i>
      </div>
    </div>
    <div id="right" class="animate">
    	<img class="bounce_in_right" src="../image/product2.png" 
    	width="200" height="406"/>
    </div>