用JavaScript实现页面滚动效果，以及用wow.js二种方式实现网页滚动效果

要实现效果是页面滚动到一块区域，该区域以动画方式出现。

这个效果需要二点：

一：我们要先写好一个css动画.

二：用js的监听页面滑动的距离在div刚出现时给div添加动画。

css动画

  1.   /*设置动画*/
  2.             @keyframes key {
  3.                 % {
  4.                     margin-left: -50px;
  5.                     opacity: ;
  6.                 }
  7.                 % {
  8.                     margin-left: 50px;
  9.                     opacity: .;
  10.                 }
  11.                 % {
  12.                     margin-left: ;
  13.                     opacity: ;
  14.                 }
  15.             }

js

用document.documentElement.scrollTop || document.body.scrollTop来获取页面滑动的距离，用来检测页面滑动的事件是scroll事件，

当页面刚好滑动到div出现时给div添加动画，这个距离是div距离顶部的距离减去div的高度即：box.offsetTop-box.offsetHeight，或者你自己写一个数值也行，只要保证Div刚出现你给它加动画即可。

  1.  window.onscroll = function() {
  2.                 //检测鼠标滚轮距离顶部位置
  3.                 var top = document.documentElement.scrollTop || document.body.scrollTop;
  4.                 console.log(top);//页面滚动时可以得到滚动的距离可以根据这个数值来决定何时给div绑定动画
  5.                 //要设置到DIV刚显示出来时给div添加动画
    　　　　　　　　   if(top > （box.offsetTop-box.offsetHeight）) { 
    　　　　　　　　　　　　box.style.animation = "key .25s linear 2"//添加动画  
    　　　　　　　　　　}
  6.             }

完整代码

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title></title>
  7.         <style>
  8.             img {
  9.                 width: 1000px;
  10.                 height: 800px;
  11.             }
  12.  
  13.             .box {
  14.                 width: 500px;
  15.                 height: 500px;
  16.                 line-height: 500px;
  17.                 text-align: center;
  18.                 font-size: 50px;
  19.                 color: red;
  20.                 border: 1px solid;
  21.             }
  22.             /*设置动画*/
  23.  
  24.             @keyframes key {
  25.                 0% {
  26.                     margin-left: -50px;
  27.                     opacity: 0;
  28.                 }
  29.                 50% {
  30.                     margin-left: 50px;
  31.                     opacity: .5;
  32.                 }
  33.                 100% {
  34.                     margin-left: 0;
  35.                     opacity: 1;
  36.                 }
  37.             }
  38.         </style>
  39.     </head>
  40.  
  41.     <body>
  42.         <img src="img/7121942f07082838da2a0540b199a9014c08f11a.jpg" />
  43.         <img src="img/7121942f07082838da2a0540b199a9014c08f11a.jpg" />
  44.         <div class="box">div以动画方式出现</div>
  45.         <script>
  46.             var box = document.querySelector(".box");
  47.             //用js检测鼠标滚轮距离顶部位置来给div添加动画
  48.             window.onscroll = function() {
  49.                 //检测鼠标滚轮距离顶部位置
  50.                 var top = document.documentElement.scrollTop || document.body.scrollTop;
  51.                 console.log(top);
  52.                 //要设置到DIV显示出来时给div添加动画 也可以设置一个数值只要保证div出来给它加动画即可
  53.                 if(top > (box.offsetTop - box.offsetHeight)) {　　　　　　　　　　　　
  54.                     box.style.animation = "key .25s linear 2" //添加动画
  55.                     　　　　　　　　
  56.                 }
  57.             }
  58.         </script>
  59.  
  60.     </body>
  61.  
  62. </html>

实际工作中如果一个页面需要大量的动画上面写法就很累人了，但我们可以用wow.js和animate.css动画库配合来实现需要的动画效果。wow.js下载地址http://www.dowebok.com/131.html，animate.css下载地址https://daneden.github.io/animate.css/

使用方法分别引入animate.css和wow.js然后在html中加上  class="wow slideInLeft"  第二个class可以自已更改.

HTML

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

wow是必须要添加的
slideInLeft说明了动画的样式，是从左边滑动出来的。更多动画样式可以再这个网址https://daneden.github.io/animate.css/查看。

js

new一下调用一下方法就完成了动画效果的附加

  1. new WOW().init();

哪里需要动画只需要在哪里的class里面写上wow slideInLeft 就好了

JavaScript实现页面滚动到div区域div以动画方式出现的更多相关文章

  1. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  2. Javascript实现页面滚动时导航智能定位

    遇到的问题: 在做官网的时候,需要滚动定位的区块的图片不确定,无法确定用户浏览区域对应的模块导航 之前的解决方案是: 通过定位滚动条的位置来判断用户浏览区域对应的模块导航,这种方法的弊端是,区块的高度 ...

  3. [转]JavaScript实现 页面滚动图片加载

    本文转自:http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html 又到了这个月的博客时间了,原计划是打算在这个月做一个 ...

  4. 【特效】页面滚动到相应位置运行css3动画

    请到我的个人博客网站上浏览此文章,欢迎评论和建议. 文章链接:http://www.xiaoxianworld.com/archives/87 现在css3动画很常见了,实际项目中经常应用,特别是那种 ...

  5. WOW.js——在页面滚动时展现动感的元素动画效果

    插件描述:WOW.js 是一款可以实现滚动页面时触发CSS 动画效果的插件,动态效果可以使网站显示更有动感. 当页面在向下滚动的时候,使用WOW.js可以让页面元素产生细小的动画效果,从而引起浏览者注 ...

  6. 使用JavaScript打印网页指定DIV区域

    JavaScript打印函数myPrint(obj): JavaScript打印页面指定div区域原理:使用window.open()在浏览器打开一个新的页面(window), 使用 window.d ...

  7. div随页面滚动遇顶固定的两种方法(js&jQuery)

    一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”.目前我们在国内的商业网站上就常常看到这样的效果了.例如 ...

  8. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  9. 点击页面其它地方隐藏该div的两种思路

    思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...

随机推荐

  1. P1004方格取数

    这是提高组得一道动态规划题,也是学习y氏思考法的第一道题. 题意为给定一个矩阵,里面存有一些数,你从左上角开始走到右下角,另一个人从右下角开始走到左上角,使得两个人取数之和最大,当然一个数只可以取走一 ...

  2. Kinect开发-开发环境搭建

    0.安装Visual Studio.版本无所谓,但Kinect SDK for Windows只支持C/C#.接下来的开发语言将使用C#,用户界面框架使用WPF. 安装Kinect SDK for W ...

  3. CSS3点击波浪按钮特效

    在线演示 本地下载

  4. sql server concat()函数

    concat()函数 --用于将两个字符串连接起来,形成一个单一的字符串 --SELECT CONCAT('FIRST ', 'SECOND') as a;

  5. Redis windows服务器配置可远程连接

    Redis配置远程可访问:修改redis.conf或redis.windows-service.conf配置文件. 具体通过 1:将绑定的本机给注释掉,找到这行 bind 127.0.0.1,然后在前 ...

  6. 08 nginx+uWSGI+django+virtualenv+supervisor发布web服务器

    一.为什么要用nginx,uwsgi? 1 首先nginx 是对外的服务接口,外部浏览器通过url访问nginx, 2nginx 接收到浏览器发送过来的http请求,将包进行解析,分析url,如果是静 ...

  7. countUp.js-数字滚动效果（简单基础使用）

    最近写了个移动端宣传页,里面有数字的效果,所以有使用到countUp.js. 以下内容有包括:h5页面countUp.js的引入和实例.参数说明.事件简单使用和描述.countUp.js源代码. 附上 ...

  8. 关于IDEA的application.properties读取乱码,以及显示乱码问题

    设置编码 如果设置之后还是不成功,就重启IDEA 再不行就删除application.properties重新编辑, 我采用的是注释掉要读取的中文部分,再下面再写一行

  9. 08 自学Aruba之限制应用流量

    点击返回:自学Aruba之路点击返回:自学Aruba集锦 08 自学Aruba之限制应用流量 限制带宽请查阅:点击 下文描述的步骤,主要是针对某一个SSID所用用户在使用某一个应用的时候设置共享带宽. ...

  10. [易学易懂系列|rustlang语言|零基础|快速入门|（18）|use关键词]

    [易学易懂系列|rustlang语言|零基础|快速入门|(18)|use关键词] 实用知识 use关键词 我们今天来讲讲use关键词. 1.简单来说,use是给其他方法或资源定义一个别名,然后调用者, ...