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

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

这个效果需要二点：

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

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

css动画

  /*设置动画*/

            @keyframes key {

                % {

                    margin-left: -50px;

                    opacity: ;

                }

                % {

                    margin-left: 50px;

                    opacity: .;

                }

                % {

                    margin-left: ;

                    opacity: ;

                }

            }

js

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

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

 window.onscroll = function() {

                //检测鼠标滚轮距离顶部位置

                var top = document.documentElement.scrollTop || document.body.scrollTop;

                console.log(top);//页面滚动时可以得到滚动的距离可以根据这个数值来决定何时给div绑定动画

                //要设置到DIV刚显示出来时给div添加动画
　　　　　　　　   if(top > （box.offsetTop-box.offsetHeight）) { 
　　　　　　　　　　　　box.style.animation = "key .25s linear 2"//添加动画  
　　　　　　　　　　}

            }

完整代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            img {

                width: 1000px;

                height: 800px;

            }

            .box {

                width: 500px;

                height: 500px;

                line-height: 500px;

                text-align: center;

                font-size: 50px;

                color: red;

                border: 1px solid;

            }

            /*设置动画*/

            @keyframes key {

                0% {

                    margin-left: -50px;

                    opacity: 0;

                }

                50% {

                    margin-left: 50px;

                    opacity: .5;

                }

                100% {

                    margin-left: 0;

                    opacity: 1;

                }

            }

        </style>

    </head>

    <body>

        <img src="img/7121942f07082838da2a0540b199a9014c08f11a.jpg" />

        <img src="img/7121942f07082838da2a0540b199a9014c08f11a.jpg" />

        <div class="box">div以动画方式出现</div>

        <script>

            var box = document.querySelector(".box");

            //用js检测鼠标滚轮距离顶部位置来给div添加动画

            window.onscroll = function() {

                //检测鼠标滚轮距离顶部位置

                var top = document.documentElement.scrollTop || document.body.scrollTop;

                console.log(top);

                //要设置到DIV显示出来时给div添加动画 也可以设置一个数值只要保证div出来给它加动画即可

                if(top > (box.offsetTop - box.offsetHeight)) {　　　　　　　　　　　　

                    box.style.animation = "key .25s linear 2" //添加动画

                    　　　　　　　　

                }

            }

        </script>

    </body>

</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

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

<div class="wow slideInRight" data-wow-offset=""  data-wow-iteration=""></div>

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

js

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

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. 列出bug的几种状态

    1.New:(新的) 当某个“bug”被发现的时候(第一次),测试人员需要与项目负责人沟通以确认发现的的确是一个bug,如果被确认是一个bug,就将其记录下来,并将bug的状态设为New. 2.Ass ...

  2. 如何用纯 CSS 创作出平滑的层叠海浪特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/JvmBdE 可交互视频教 ...

  3. 附录3：RMA算法原理

    RMA算法分三步: 一.背景校正(没精力写了) 二.归一化(没精力写了) 三.计算表达值 假设有5张芯片,这些芯片的某个探针组包含5个探针,它们的表达值如下: GeneChip 4 8 6 9 7 3 ...

  4. button标签与input type=button标签使用的差异

    button标签和input type=button标签都是html文档中用来表示按钮属性的元素,不过他们在布局和实际使用功能中存在一些差异. 下面将项目中遇到的一些总结如下: 1.属性和布局差异. ...

  5. Ubuntu分区挂载

    创建主分区: 25G    主分区    空间起始位置    Ext4日志文件系统    / (ps:安装主要放这了,原因不明) 创建swap分区: 8192MB    逻辑分区        空间起 ...

  6. 【Java面试题】解释内存中的栈（stack）、堆(heap)和静态存储区的用法

    Java面试题:解释内存中的栈(stack).堆(heap)和静态存储区的用法 堆区: 专门用来保存对象的实例(new 创建的对象和数组),实际上也只是保存对象实例的属性值,属性的类型和对象本身的类型 ...

  7. python 练习合集一

    一.运算符与流程控制 1.输入两个整数,打印较大的那个值2.输入三个整数,按照从小到大的顺序打印3.输入一个三位数,打印其个位.十位.百位上的数4.输入一个年份,判断是否为闰年,是打印一句话,不是打印 ...

  8. AES加密解密 Java中运用

    AES全称 Advanced Encryption Standard, 高级加密算法,更加安全,可取代DES. Aes: package com.blog.d201706.encrypt; impor ...

  9. [转自SA]浅谈nginx的工作原理和使用

    nginx apache 简单对比 nginx 相对 apache 的优点: 轻量级,同样起web 服务,比apache 占用更少的内存及资源 抗并发,nginx 处理请求是异步非阻塞的,而 apac ...

  10. 18、远程管理卡、戴尔划RAid

    1.配置远程管理卡: 第一个iDRAC6是远程控制卡名称 第三个LAN ...是配置远程控制卡的 下图配置结束按Esc退出 最后按Esc保存退出 2.windows配置远程管理卡: 把下载下来的软件安 ...