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）