1.  <style>
  2.          body{overflow-x: hidden;width:80%;margin:auto;}
  3.          body:after {
  4.          content: ".";
  5.          clear: both;
  6.          display: block;
  7.          }
  8.          div{width:32%;height: 20vw;background: #e3e4e5;margin-right:2%;box-sizing: content-box;margin-top:1.6vw;float:left;}
  9.          div:nth-of-type(3n+3) {
  10.          margin-right:;
  11.          }
  12.          @keyframes f-up {
  13.              0% {
  14.                  will-change: transform;/*优化动画卡顿1*/
  15.                  /*position:relative;优化动画卡顿2*/
  16.                  /*z-index: 1;优化动画卡顿2*/
  17.                  opacity:; /*初始状态 透明度为0*/
  18.                  transform:translateY(100px);/*初始状态 文档流下100px*/
  19.              }
  20.              100% {
  21.                  opacity:; /*结尾状态 透明度为1*/
  22.                  transform:translateY(0px);/*初始状态 恢复正常位置*/
  23.              }
  24.          }
  25.          .f-up{
  26.              animation-name: f-up; /*动画名称*/
  27.              animation-duration: 0.8s; /*动画持续时间*/
  28.              animation-iteration-count:; /*动画次数*/
  29.              animation-delay: 0s; /*延迟时间*/
  30.          }
  31.  </style>
  1.  <body>
  2.  <div class="vanwee"></div>
  3.  <div class="vanwee"></div>
  4.  <div class="vanwee"></div>
  5.  <div class="vanwee"></div>
  6.  <div class="vanwee"></div>
  7.  <div class="vanwee"></div>
  8.  <div class="vanwee"></div>
  9.  <div class="vanwee"></div>
  10.  <div class="vanwee"></div>
  11.  <div class="vanwee"></div>
  12.  <div class="vanwee"></div>
  13.  <div class="vanwee"></div>
  14.  <div class="vanwee"></div>
  15.  <div class="vanwee"></div>
  16.  <div class="vanwee"></div>
  17.  <div class="vanwee"></div>
  18.  <div class="vanwee"></div>
  19.  <div class="vanwee"></div>
  20.  <div class="vanwee"></div>
  21.  <div class="vanwee"></div>
  22.  <div class="vanwee"></div>
  23.  <div class="vanwee"></div>
  24.  <div class="vanwee"></div>
  25.  <div class="vanwee"></div>
  26.  <div class="vanwee"></div>
  27.  <div class="vanwee"></div>
  28.  <div class="vanwee"></div>
  29.  <div class="vanwee"></div>
  30.  <div class="vanwee"></div>
  31.  <div class="vanwee"></div>
  32.  <div class="vanwee"></div>
  33.  <div class="vanwee"></div>
  34.  <div class="vanwee"></div>
  35.  <div class="vanwee"></div>
  36.  <div class="vanwee"></div>
  37.  <div class="vanwee"></div>
  38.  <div class="vanwee"></div>
  39.  <div class="vanwee"></div>
  40.  <div class="vanwee"></div>
  41.  <div class="vanwee"></div>
  42.  <script charset="utf-8" src="//blog-static.cnblogs.com/files/vanwee/fade.js"></script>
  43.  </body>
  1.  <script>
  2.  // 获取浏览器可见区域高度
  3.          var window_height= document.documentElement.clientHeight;
  4.          // 用户手动修改浏览器可见区域高度时修改变量
  5.          window.onresize=function () {window_height=document.documentElement.clientHeight;};
  6.          // 获取所需效果元素
  7.          var My_vanwee=document.getElementsByClassName('vanwee');
  8.          // 鼠标滚轮滚动执行方法
  9.          window.onscroll = function(){
  10.              // 获取鼠标滚轮滚动距离
  11.              var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  12.              // 循环类vanwee
  13.              for (var k=0;k<My_vanwee.length;k++){
  14.                  if (My_vanwee[k].classList.contains("f-up")==false && _scrollTop >= getOffsetTop(My_vanwee[k]) - window_height && _scrollTop<= getOffsetTop(My_vanwee[k])){
  15.                      My_vanwee[k].classList.add("f-up");
  16.                  }
  17.              }
  18.          };
  19.          // 判断元素父集是否有已定位元素
  20.          function getOffsetTop(ele) {
  21.              var rtn = ele.offsetTop;
  22.              var o = ele.offsetParent;
  23.              while(o!=null) {
  24.                      rtn += o.offsetTop;
  25.                      o = o.offsetParent;
  26.              }
  27.              return rtn;
  28.          }
  29.          // 滚动条等于0时执行第一屏效果
  30.          function my_animation() {
  31.              var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  32.              // 效果方法
  33.              for (var k=0;k<My_vanwee.length;k++) {
  34.                  if (My_vanwee[k].classList.contains("f-up")==false && _scrollTop>= getOffsetTop(My_vanwee[k]) - window_height && _scrollTop<= getOffsetTop(My_vanwee[k])){
  35.                      My_vanwee[k].classList.add("f-up");
  36.                  }
  37.              }
  38.          }
  39.          my_animation();
  40.  </script>

 使用方法：

在想要添加动画的元素上添加class类名：vanwee

由于我只需要从下渐现向上移动的效果，所以从原博主转载过来做了调整，大家有不明白的地方建议查看转载来源博主的详细解说，或者查看本博文最下方的原文复制内容。测试只兼容IE10及以上版本，应该是JS第14行.contains的原因。我魅族手机浏览器竖着看的时候有点闪烁，其他手机和电脑设备均正常。欢迎大佬看到支援。。

JS文件：https://blog-static.cnblogs.com/files/vanwee/fade.js

转载来源：https://blog.csdn.net/likeyou1207/article/details/80782935

原博文内容：

废话不多说，直接上代码，附用法，纯博主手写，看完后，觉得好左上角请点个赞,觉得不好的请留下您的建议，谢谢（此代码改版很方便，大家可以任意发挥）

（注意：如果不想自己写动画的，可以引入Animate.css  相信这个动画库大家都不陌生）

  1.  body{overflow-x: hidden;}
  2.  div{width: 100px;height: 100px;margin: 100px auto 0;background: red;}
  1.  <body>
  2.      <div class="dream" data-animate="bounceInUp,1s,linear"></div>
  3.      <div class="dream" data-animate="flash,2s,linear"></div>
  4.      <div class="dream" data-animate="pulse,1s,linear"></div>
  5.      <div class="dream" data-animate="rubberBand,1s,linear"></div>
  6.      <div class="dream" data-animate="shake,1s,linear"></div>
  7.      <div class="dream" data-animate="swing,1s,linear"></div>
  8.      <div class="dream" data-animate="tade,1s,linear"></div>
  9.      <div class="dream" data-animate="wobble,1s,linear"></div>
  10.      <div class="dream" data-animate="jello,1s,linear"></div>
  11.      <div class="dream" data-animate="bounceIn,1s,linear"></div>
  12.      <div class="dream" data-animate="bounceInDown,1s,linear"></div>
  13.      <div class="dream" data-animate="bounceInLeft,1s,linear"></div>
  14.      <div class="dream" data-animate="bounceInRight,1s,linear"></div>
  15.      <div class="dream" data-animate="bounceInUp,1s,linear"></div>
  16.      <div class="dream" data-animate="bounceOut,1s,linear"></div>
  17.      <div class="dream" data-animate="bounceOutDown,1s,linear"></div>
  18.      <div class="dream" data-animate="bounceOutLeft,1s,linear"></div>
  19.      <div class="dream" data-animate="bounceOutRight,1s,linear"></div>
  20.      <div class="dream" data-animate="bounceOutUp,1s,linear"></div>
  21.      <div class="dream" data-animate="fadeIn,1s,linear"></div>
  22.      <div class="dream" data-animate="fadeInDown,1s,linear"></div>
  23.      <div class="dream" data-animate="fadeInLeft,1s,linear"></div>
  24.      <div class="dream" data-animate="fadeInRight,1s,linear"></div>
  25.      <div class="dream" data-animate="fadeInUp,1s,linear"></div>
  26.      <div class="dream" data-animate="fadeInDownBig,1s,linear"></div>
  27.      <div class="dream" data-animate="fadeInLeftBig,1s,linear"></div>
  28.      <div class="dream" data-animate="fadeInRightBig,1s,linear"></div>
  29.      <div class="dream" data-animate="fadeInUpBig,1s,linear"></div>
  30.      <div class="dream" data-animate="flip,1s,linear"></div>
  31.      <div class="dream" data-animate="hinge,1s,linear"></div>
  32.  </body>
  1.  <script>
  2.  // 获取浏览器可见区域高度
  3.  var window_height= document.documentElement.clientHeight;
  4.  // 用户手动修改浏览器可见区域高度时修改变量
  5.  window.onresize=function () {
  6.      window_height=document.documentElement.clientHeight;
  7.  };
  8.  // 获取所需效果元素
  9.  var My_dream=document.getElementsByClassName('dream');
  10.  // 鼠标滚轮滚动执行方法
  11.  window.onscroll = function(){
  12.      // 获取鼠标滚轮滚动距离
  13.      var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  14.  
  15.      // 循环类dream
  16.      for (var k=0;k<My_dream.length;k++){
  17.          if (_scrollTop>= getOffsetTop(My_dream[k]) - window_height && _scrollTop<= getOffsetTop(My_dream[k]) ){
  18.              My_dream[k].style.animationName=My_dream[k].dataset.animate.split(',')[0];
  19.              My_dream[k].style.animationDuration=My_dream[k].dataset.animate.split(',')[1];
  20.              My_dream[k].style.animationTimingFunction=My_dream[k].dataset.animate.split(',')[2];
  21.          }
  22.      }
  23.  };
  24.  
  25.  // 判断元素父集是否有已定位元素
  26.  function getOffsetTop(ele) {
  27.      var rtn = ele.offsetTop;
  28.      var o = ele.offsetParent;
  29.      while(o!=null)
  30.      {
  31.          rtn += o.offsetTop;
  32.          o = o.offsetParent;
  33.      }
  34.      return rtn;
  35.  }
  36.  
  37.  // 滚动条等于0时执行第一屏效果
  38.  function my_animation() {
  39.      var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  40.      // 效果方法
  41.      for (var k=0;k<My_dream.length;k++){
  42.          if (_scrollTop>= getOffsetTop(My_dream[k]) - window_height && _scrollTop<= getOffsetTop(My_dream[k]) ){
  43.              My_dream[k].style.animationName=My_dream[k].dataset.animate.split(',')[0];
  44.              My_dream[k].style.animationDuration=My_dream[k].dataset.animate.split(',')[1];
  45.              My_dream[k].style.animationTimingFunction=My_dream[k].dataset.animate.split(',')[2];
  46.          }
  47.      }
  48.  }
  49.  my_animation();
  50.  </script>

用法很简单：

1)注意：没有自己写动画效果时，记得引入animate.css动画库

2)在想要添加动画的元素上添加class类名 dream

3)然后添加自定义属性 （ data-animate="动画名称,动画时间,动画速率" ），注意中间有 ","号隔开

4)加上后查看效果即可，使用前可以先复制博主代码查看下效果

（您的评价是对博主最大的鼓励，欢迎评价，觉得好左上角请点个赞，觉得不好的请留下您的建议，谢谢 (*￣︶￣)  ）

如果您还是觉得很模糊的，请留下您的联系方式，博主会在一天内给您回复
---------------------
作者：likeYou1207
来源：CSDN
原文：https://blog.csdn.net/likeyou1207/article/details/80782935
版权声明：本文为博主原创文章，转载请附上博文链接！

友情链接：

上海网页设计公司

原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用滚动监测的更多相关文章

  1. 使用原生JS，实现鼠标点击爱心效果 ！！！

    使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的.其实实现起来也很简单,下面一起来学习一下吧.文末附上 ...

  2. JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  3. 利用jquery制作滚动到指定位置触发动画

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...

  4. scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

    scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...

  5. JS/jquery实现鼠标控制页面元素显隐

    最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...

  6. 原生js与jquery加载页面元素比较

    原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素 <script type="text/javascrip ...

  7. html/css 滚动到元素位置，显示加载动画

    每次滚动到元素时,都显示加载动画,如何添加? 元素添加初始参数 以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部. 添加初始数据,默认透明度0.左右分别移动100px. //左侧容器 .it ...

  8. 原生JS 实现点击按钮创建元素

    要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外 思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小 ...

  9. 原生JS 获取浏览器、窗口、元素等尺寸的方法及注意事项

    一.通过浏览器获得屏幕的尺寸 screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去 ...

随机推荐

  1. 了不起的WebRTC：生态日趋完善，或将实时音视频技术白菜化

    本文原文由声网WebRTC技术专家毛玉杰分享. 1.前言 有人说 2017 年是 WebRTC 的转折之年,2018 年将是 WebRTC 的爆发之年,这并非没有根据.就在去年(2017年),WebR ...

  2. 使用HOG特征+BP神经网络进行车标识别

    先挖个坑,快期末考试了,有空填上w 好了,今晚刚好有点闲,就把坑填上吧. //-------------------------------开篇---------------------------- ...

  3. 315道python面试题（参考答案）

    第一部分 Python基础篇 1:为什么学习Python 家里有在这个IT圈子里面,也想让我接触这个圈子,然后给我建议学的Python, 然后自己通过百度和向有学过Python的同学了解了Python ...

  4. 记录python题

    def mone_sorted(itera): new_itera = [] while itera: min_value = min(itera) new_itera.append(min_valu ...

  5. CMake设置编译参数

    项目中的CMake编译参数一直参照Muduo进行设置. Muduo的CMakeLists.txt中,MAKE_CXX_FLAGS设置较为清晰明了,因此一直在项目中沿用. set(CXX_FLAGS - ...

  6. 译《The Part-Time Parliament》——终于读懂了Paxos协议！

    最近的考古发现表明,在Paxos小岛上,尽管兼职议会成员都有逍遥癖,但议会模式仍然起作用.他们依旧保持了一致的会议记录,尽管他们频繁的进出会议室并且他们的信使还很健忘.Paxon议会协议提供了一种新方 ...

  7. 项目中使用sass，如何实现自动编译

    本次React项目中用到了Sass,在一个主文件main.scss中引入了其余的scss文件,然后把main.scss文件编译为main.css文件,最后在项目的主文件入口index.html中引入m ...

  8. 物流一站式查询之TrackingMore篇

    连载篇提前看 物流一站式查询之TrackingMore篇 物流一站式查询之顺丰接口篇 物流一站式查询之快递100篇 快递查询接口 目前提供快递查询的接口平台有: Trackingmore 快递100 ...

  9. [Android 泥水匠] Android基础 之一：浅谈Android架构到HelloWorld案例的剖析

    作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节. 交流QQ群:[编程之美 365234583] ...

  10. java--String equals方法

    本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. public boolean equals(Object anObject) { //1.先和自身比较对 ...