JavaScript实现页面滚动到div区域div以动画方式出现

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

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

这个效果需要二点：

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

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

css动画

  /*设置动画*/@keyframes key {0% {margin-left: -50px;opacity: 0;}50% {margin-left: 50px;opacity: .5;}100% {margin-left: 0;opacity: 1;}}

用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="10"  data-wow-iteration="10"></div>

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

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

new WOW().init();

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

转载于:https://www.cnblogs.com/zimengxiyu/p/9781124.html

JavaScript实现页面滚动到div区域div以动画方式出现相关推荐

html如何设置滚动动画,JavaScript 实现页面滚动动画
在做前端 UI 效果时,让元素根据滚动位置实现动画效果是一个非常流行的设计,通常我们会使用第三方插件或库来实现.在本教程中,我将教大家使用纯 JavaScript 和 CSS 来实现. 先预览一下实现 ...
WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
动态效果html wow,WOW.js ? 在页面滚动时展现动感的元素动画效果_html/css_WEB-ITnose...
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
JavaScript 实现页面滚动动画
先预览一下实现效果: 我们使用 CSS 来实现动画,用 JavaScript 来处理触发所需的样式.我们先来创建布局. 创建布局我们先使用 HTML 创建页面布局,然后为需要实现动画的元素分配一个通 ...
你也可以做一个小米魅族网站 WOW js WOW js – 在页面滚动时展现动感的元素动画效果
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 可视区域 ...
你也可以做一个小米魅族网站（WOW.js：WOW.js – 在页面滚动时展现动感的元素动画效果）
可视区域动画: aos.js :http://www.jq22.com/jquery-info8150 scrollReveal.js :http://to ...
通过js滚轮滚动时调用动画_WOW.js在页面滚动时展现动感的元素动画效果
插件描述:WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画 ...
JavaScript实现页面滚动图片加载
原理: 1.给页面绑定滚动事件: 2.加载页面的时候把真正的图片地址放在某属性中: 3.然后再滚动过程中判断元素是否进入当前浏览器窗口内: 4.最后加载图片,当然加载什么,用什哪种用户体验都得由你决定 ...
javaScript:获取页面滚动距离的元素.scrollTop和元素.scrollLeft获取的兼容性处理（IE、Chrome 、 FireFox、Safari）
+ 向上滚动的距离: 元素.scrollTop 区别: ==> IE 浏览器 + 没有 DOCTYPE 声明的时候,用这两个都行 + 有 DOCTYPE 声明的时候,只能用 document.d ...

JavaScript实现页面滚动到div区域div以动画方式出现

JavaScript实现页面滚动到div区域div以动画方式出现相关推荐

最新文章

热门文章