animate.js下载实现页面滚动时animate.css动画特效

更新时间:2021-08-27 17:37:22 来源:青锋建站 作者:青锋建站
  animate.css动画库,预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果。几乎包含了所有常见的动画效果,但在使用上与我们一般的实际项目有些出入,如果达到我们想要的效果需要添加JS代码来配合实现。我们在网站建设上使用animate.css动画库的情况是:当鼠标滑过某一DIV时,内部相应的模块执行动画播放。为此青锋建站专业开发了JS调用animate.css动画库的万能调用代码,使用非常方便,不需要JS开发能力也可以方便使用,但是只适用于鼠标滑过时,内部执行动画。

最新版本已经发布,提升了性能和兼容性,请下载最新版本,上次更新时间为2019-02-28,本次更新时间为2019-07-26,请关注后续更新。

animate.css动画库万能调用代码介绍

  animate.css动画库万能调用代码可以实现当模块滑过某一DIV或块时,内部相应的设置有动画类名的标签执行动画。只需要添加CSS类名,不需要JS开发。由青锋建站前端开发团队设计功能,免费开发给大家,只需要关注青锋建站的百度百家号就可以免费获取代码。
可以实现两种效果
A页面加载完成,鼠标滑过执行动画一次,默认下载完使用就是这种效果。
B页面加载完成,鼠标滑过执行动画一次,鼠标离开,再次进行仍然可以执行,类似CSS伪类的效果,只需要把animate.js里的注释部分去掉就可以。这种效果通过CSS伪类也可以实现。当然这里不做介绍。
兼容性分析
兼容性以下浏览器上的相应版本或以上版本:firfox 3.0/ie 9.0/chrome 4.0/safari 3.1/opera 9.5。
animate.css动画库万能调用代码下载地址animate.js,下载码获取方式:
关注青锋建站微信公众号,关注后-在文本输入框中输入:(animate.js)即可获得下载码。

animate.css万能调用代码使用方法

  animate.css万能调用代码傅非常简单,只需要给外层标签添加类名(qingfengjianzhan),再给内部标签添加(qf-动画名称)为名称的CSS类名就可以。例如:以下示例代码就可以实现相应的功能,当鼠标滑过<div class="qingfengjianzhan">时,里面的动画就会触发执行。
  <div class="qingfengjianzhan">
    <div class="qf-slideInLeft">
    </div>
    <div class="qf-slideInRight">
    </div>
  </div>
  
  !注意:默认下载的animate.js里已经将鼠标移出某个块儿时onmouseout的注册事件去掉,如果想鼠标进入执行动画,鼠标离开后再次进入仍然执行动画的效果,只需要把animate.js里的注释部分去掉就可以。

页面滚动时实现animate.css动画的其他方法

  使用wow.js可以实现同样的功能,wow.js是专业的页面滚动特效JS功能集合。而animate.js只是为了把问题简单化,给初学者使用,在性能上由于使用了循环,性能上稍逊,最新版本已经改善这一情况。我们不求做得多好,只求最简单的方法来实现这一功能。
  青锋建站,提供专业的高品质网站制作服务,包括网站建设,SEO,网络营销,PHP开发,网站建设知名品牌,全国接单,专业做优化型网站,为企业构建营销平台。animate.js由青锋建站团队开发,复制,散发请注明来源。

转载请注明来源网址:青锋建站-http://www.sjzphp.com/code/animate_666.html

电话 15632335515 | 邮箱 943703539@qq.com | QQ 943703539 | 微信 qingfengjianzhan

Copyright © 2016-2026 青锋建站 版权所有