美文网首页
基于animate和fullpage制作动画demo的总结

基于animate和fullpage制作动画demo的总结

作者: 风林山 | 来源:发表于2016-10-28 11:27 被阅读0次

    animate.css就是一个动画库,使用时注意点:

    1. 用法:
      <head> <link rel="stylesheet" href="animate.min.css"> </head> <h1 class="animated bounceOut">Animate.css</h1>

    2. 当与jQuery结合起来,你可以自己决定何时启用这些动画,通过jQuery动态添加使用动画:
      $('#yourElement').addClass('animated bounceOutLeft');

    3. 可以检测动画结束事件:
      $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

    4. :jQuery.one() 最多执行事件处理一次。

    5. 您可以更改动画的持续时间,增加延迟或改变显示次数:
      #yourElement { -vendor-animation-duration: 3s; -vendor-animation-delay: 2s; -vendor-animation-iteration-count: infinite; }
      *注意:一定要在CSS适当的前缀(webkit, moz等)代替“vendor”

    fullpage的afterLoad方法中注意点:

    1. anchorLink和index分别是锚链接名称(section)和 序号(对应锚链接)。
    2. 利用if语句判断页面锚链接的序号。
    3. 使用addClass改变标签属性,将标签属性改为所需要的动画(注:每一页(section)的动画必须写在相对应的if语句中)。
    4. 需要有动画的标签除了第一页(section),都需要设置隐藏属性display:none;否则所有的section会同时执行动画,导致其他页面动画提前执行。
    5. 在相对应的if中使用show方法使其显示。

    相关链接:

    jQuery全屏滚动插件FullPage.js中文帮助文档API:http://www.uedsc.com/fullpage.html
    动画demo以及资料访问地址:vss上面 \99.Study\demo and package.rar

    相关文章

      网友评论

          本文标题:基于animate和fullpage制作动画demo的总结

          本文链接:https://www.haomeiwen.com/subject/mizsuttx.html