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

发布时间:2019-02-28 18:49:19 来源:青锋建站 作者:青锋建站
  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由青锋建站团队开发,复制,散发请注明来源。
分享到:

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