• pc网站随鼠标滚动动态出现效果


    1.scroll滚动监听窗口事件,配合动画或css3

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

    js

    $('.panel').addClass('animated fadeInUp'); // 1:直接添加
    $(document).scroll(function() { 2:监听窗口滚动添加
        var scroH = $(document).scrollTop();  //滚动高度                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
        if( scroH >280 ){  //距离顶部大于等于100px时
            $(.panel').addClass('animated fadeInUp');
        }
    });

    css

    .panel{
      animate-duration: 3s;   /* 动画持续时间 */
      animate-delay: 2s;   /* 动画延迟时间 */
      animate-iteration-count: 1;   /* 动画执行次数 */
    }

    2.第三方开发库如 wow.js
    wow.js依赖于animate.css,首先在头部引用animate.css或者animate.min.css。

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

    在最底部引用wow.js或者wow.min.js,然后再下面再写一行javascript代码。(无需引用jQuery)

    <script type="text/javascript" src="../res/static/js/wow.min.js"></script>
    <script type="text/javascript">
        if(!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
          new WOW().init();
        };
    </script>

    html

    <div class="wow slideInLeft" 
      data-wow-duration="2s" 
      data-wow-delay="5s" 
      data-wow-offset="10"  
      data-wow-iteration="10"></div>

    如果需要自定义配置,可如下使用:

    <em id="__mceDel">    boxClass: 'wow',
        animateClass: 'animated',
        offset: 0,
        mobile: true,
        live: true
    });
    wow.init();</em>

    在css下方js上方写需要动画的元素(必须设置为块状或者行内块状!必须设置为块状或者行内块状!必须设置为块状或者行内块状!),并添加class类名。
    类名前面的wow是每一个带动画的元素都要加的,slideInLeft就是说明动画样式。(更多动画样式:https://www.cnblogs.com/front-Q/p/9006878.html)后面的data-wow-duration(动画持续时间)、data-wow-delay(动画延迟时间)、data-wow-offset(元素的位置露出后距离底部多少像素执行)和data-wow-iteration(动画执行次数)这四个属性可选可不选。

    data-wow-duration:更改动画持续时间
    data-wow-delay:动画开始前的延迟
    data-wow-offset:开始动画的距离(与浏览器底部相关)
    data-wow-iteration:动画的次数重复(无限次:infinite)

  • 相关阅读:
    private
    接口
    抽象类的认识
    静态导入和类中的代码块
    instanceof 与 应用类型强转
    重写的理解
    继承初体验
    赶紧收藏!春招Java面经总结,拿大厂Offer的必备复习资料!
    react native 升级到0.31.0的相关问题 mac xcode开发环境
    c# 线程池多任务处理并返回值
  • 原文地址:https://www.cnblogs.com/xiong88/p/12464481.html
Copyright © 2020-2023  润新知