原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用滚动监测
<style>
body{overflow-x: hidden;width:80%;margin:auto;}
body:after {
content: ".";
clear: both;
display: block;
}
div{width:32%;height: 20vw;background: #e3e4e5;margin-right:2%;box-sizing: content-box;margin-top:1.6vw;float:left;}
div:nth-of-type(3n+3) {
margin-right:;
}
@keyframes f-up {
0% {
will-change: transform;/*优化动画卡顿1*/
/*position:relative;优化动画卡顿2*/
/*z-index: 1;优化动画卡顿2*/
opacity:; /*初始状态 透明度为0*/
transform:translateY(100px);/*初始状态 文档流下100px*/
}
100% {
opacity:; /*结尾状态 透明度为1*/
transform:translateY(0px);/*初始状态 恢复正常位置*/
}
}
.f-up{
animation-name: f-up; /*动画名称*/
animation-duration: 0.8s; /*动画持续时间*/
animation-iteration-count:; /*动画次数*/
animation-delay: 0s; /*延迟时间*/
}
</style>
<body>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<div class="vanwee"></div>
<script charset="utf-8" src="//blog-static.cnblogs.com/files/vanwee/fade.js"></script>
</body>
<script>
// 获取浏览器可见区域高度
var window_height= document.documentElement.clientHeight;
// 用户手动修改浏览器可见区域高度时修改变量
window.onresize=function () {window_height=document.documentElement.clientHeight;};
// 获取所需效果元素
var My_vanwee=document.getElementsByClassName('vanwee');
// 鼠标滚轮滚动执行方法
window.onscroll = function(){
// 获取鼠标滚轮滚动距离
var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 循环类vanwee
for (var k=0;k<My_vanwee.length;k++){
if (My_vanwee[k].classList.contains("f-up")==false && _scrollTop >= getOffsetTop(My_vanwee[k]) - window_height && _scrollTop<= getOffsetTop(My_vanwee[k])){
My_vanwee[k].classList.add("f-up");
}
}
};
// 判断元素父集是否有已定位元素
function getOffsetTop(ele) {
var rtn = ele.offsetTop;
var o = ele.offsetParent;
while(o!=null) {
rtn += o.offsetTop;
o = o.offsetParent;
}
return rtn;
}
// 滚动条等于0时执行第一屏效果
function my_animation() {
var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 效果方法
for (var k=0;k<My_vanwee.length;k++) {
if (My_vanwee[k].classList.contains("f-up")==false && _scrollTop>= getOffsetTop(My_vanwee[k]) - window_height && _scrollTop<= getOffsetTop(My_vanwee[k])){
My_vanwee[k].classList.add("f-up");
}
}
}
my_animation();
</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 相信这个动画库大家都不陌生）
body{overflow-x: hidden;}
div{width: 100px;height: 100px;margin: 100px auto 0;background: red;}
<body>
<div class="dream" data-animate="bounceInUp,1s,linear"></div>
<div class="dream" data-animate="flash,2s,linear"></div>
<div class="dream" data-animate="pulse,1s,linear"></div>
<div class="dream" data-animate="rubberBand,1s,linear"></div>
<div class="dream" data-animate="shake,1s,linear"></div>
<div class="dream" data-animate="swing,1s,linear"></div>
<div class="dream" data-animate="tade,1s,linear"></div>
<div class="dream" data-animate="wobble,1s,linear"></div>
<div class="dream" data-animate="jello,1s,linear"></div>
<div class="dream" data-animate="bounceIn,1s,linear"></div>
<div class="dream" data-animate="bounceInDown,1s,linear"></div>
<div class="dream" data-animate="bounceInLeft,1s,linear"></div>
<div class="dream" data-animate="bounceInRight,1s,linear"></div>
<div class="dream" data-animate="bounceInUp,1s,linear"></div>
<div class="dream" data-animate="bounceOut,1s,linear"></div>
<div class="dream" data-animate="bounceOutDown,1s,linear"></div>
<div class="dream" data-animate="bounceOutLeft,1s,linear"></div>
<div class="dream" data-animate="bounceOutRight,1s,linear"></div>
<div class="dream" data-animate="bounceOutUp,1s,linear"></div>
<div class="dream" data-animate="fadeIn,1s,linear"></div>
<div class="dream" data-animate="fadeInDown,1s,linear"></div>
<div class="dream" data-animate="fadeInLeft,1s,linear"></div>
<div class="dream" data-animate="fadeInRight,1s,linear"></div>
<div class="dream" data-animate="fadeInUp,1s,linear"></div>
<div class="dream" data-animate="fadeInDownBig,1s,linear"></div>
<div class="dream" data-animate="fadeInLeftBig,1s,linear"></div>
<div class="dream" data-animate="fadeInRightBig,1s,linear"></div>
<div class="dream" data-animate="fadeInUpBig,1s,linear"></div>
<div class="dream" data-animate="flip,1s,linear"></div>
<div class="dream" data-animate="hinge,1s,linear"></div>
</body>
<script>
// 获取浏览器可见区域高度
var window_height= document.documentElement.clientHeight;
// 用户手动修改浏览器可见区域高度时修改变量
window.onresize=function () {
window_height=document.documentElement.clientHeight;
};
// 获取所需效果元素
var My_dream=document.getElementsByClassName('dream');
// 鼠标滚轮滚动执行方法
window.onscroll = function(){
// 获取鼠标滚轮滚动距离
var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // 循环类dream
for (var k=0;k<My_dream.length;k++){
if (_scrollTop>= getOffsetTop(My_dream[k]) - window_height && _scrollTop<= getOffsetTop(My_dream[k]) ){
My_dream[k].style.animationName=My_dream[k].dataset.animate.split(',')[0];
My_dream[k].style.animationDuration=My_dream[k].dataset.animate.split(',')[1];
My_dream[k].style.animationTimingFunction=My_dream[k].dataset.animate.split(',')[2];
}
}
}; // 判断元素父集是否有已定位元素
function getOffsetTop(ele) {
var rtn = ele.offsetTop;
var o = ele.offsetParent;
while(o!=null)
{
rtn += o.offsetTop;
o = o.offsetParent;
}
return rtn;
} // 滚动条等于0时执行第一屏效果
function my_animation() {
var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 效果方法
for (var k=0;k<My_dream.length;k++){
if (_scrollTop>= getOffsetTop(My_dream[k]) - window_height && _scrollTop<= getOffsetTop(My_dream[k]) ){
My_dream[k].style.animationName=My_dream[k].dataset.animate.split(',')[0];
My_dream[k].style.animationDuration=My_dream[k].dataset.animate.split(',')[1];
My_dream[k].style.animationTimingFunction=My_dream[k].dataset.animate.split(',')[2];
}
}
}
my_animation();
</script>
用法很简单：
1)注意：没有自己写动画效果时，记得引入animate.css动画库
2)在想要添加动画的元素上添加class类名 dream
3)然后添加自定义属性 （ data-animate="动画名称,动画时间,动画速率" ），注意中间有 ","号隔开
4)加上后查看效果即可，使用前可以先复制博主代码查看下效果
（您的评价是对博主最大的鼓励，欢迎评价，觉得好左上角请点个赞，觉得不好的请留下您的建议，谢谢 (*￣︶￣) ）
如果您还是觉得很模糊的，请留下您的联系方式，博主会在一天内给您回复
---------------------
作者：likeYou1207
来源：CSDN
原文：https://blog.csdn.net/likeyou1207/article/details/80782935
版权声明：本文为博主原创文章，转载请附上博文链接！
友情链接：
原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用滚动监测的更多相关文章
- 使用原生JS，实现鼠标点击爱心效果 ！！！
使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的.其实实现起来也很简单,下面一起来学习一下吧.文末附上 ...
- JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...
- 利用jquery制作滚动到指定位置触发动画
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...
- scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置
scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...
- JS/jquery实现鼠标控制页面元素显隐
最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...
- 原生js与jquery加载页面元素比较
原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素 <script type="text/javascrip ...
- html/css 滚动到元素位置，显示加载动画
每次滚动到元素时,都显示加载动画,如何添加? 元素添加初始参数 以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部. 添加初始数据,默认透明度0.左右分别移动100px. //左侧容器 .it ...
- 原生JS 实现点击按钮创建元素
要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外 思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小 ...
- 原生JS 获取浏览器、窗口、元素等尺寸的方法及注意事项
一.通过浏览器获得屏幕的尺寸 screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去 ...
随机推荐
- 【渗透攻防WEB篇】SQL注入攻击初级
前言不管用什么语言编写的Web应用,它们都用一个共同点,具有交互性并且多数是数据库驱动.在网络中,数据库驱动的Web应用随处可见,由此而存在的SQL注入是影响企业运营且最具破坏性的漏洞之一,这里我想问 ...
- 吴恩达机器学习笔记38-决策下一步做什么（Deciding What to Do Next Revisited）
我们已经讨论了模型选择问题,偏差和方差的问题.那么这些诊断法则怎样帮助我们判断,哪些方法可能有助于改进学习算法的效果,而哪些可能是徒劳的呢? 让我们再次回到最开始的例子,在那里寻找答案,这就是我们之前 ...
- 第34节：Java当中的异常
Java当中的异常 了解Java当中的异常,那么什么是异常呢?异常又有什么分类呢?异常中的特殊结构:try...catch...finally 结构的使用方法. 异常是一种对象,是靠虚拟机产生的,异常 ...
- 移动端调试神器-vConsole
什么是vConsole? 官方说明是一个web前端开发者面板,可用于展示console日志,方便日常开发,调试. 简单来说相当于移动版的Chrome调试控制台,就是我们在PC端常用的F12 vCo ...
- JDK9新特性实战：流关闭新姿势
做Java开发的都知道,每个资源的打开都需要对应的关闭操作,不然就会使资源一直占用而造成资源浪费,从而降低系统性能. 关于资源的关闭操作,从JDK7-JDK9有了不少的提升及简化. JDK6 在JDK ...
- shell编程其实真的很简单（一）
如今,不会Linux的程序员都不意思说自己是程序员,而不会shell编程就不能说自己会Linux.说起来似乎shell编程很屌啊,然而不用担心,其实shell编程真的很简单. 背景 什么是shell编 ...
- Spring Cloud是怎么运行的？
导读 在之前的文章中给大家介绍了Spring Boot的基本运行原理(链接),收到了很多读者朋友们关于目前比较流行的微服务框架Spring Cloud的问题反馈.因此,在这篇文章中小码哥打算和大家一起 ...
- Quartz的使用案例
一.介绍 项目中的调度任务可以使用Quartz任务调度框架 1.Job接口:这个接口里面只定义了一个方法,excute void execute(JobExecutionContext context ...
- EL表达式jsp页面double小数点后保留两位
EL表达式jsp页面double小数点后保留两位,四舍五入 <fmt:formatNumber type="number" value="${member.logi ...
- 【Android基础】Fragment 详解之Fragment介绍
Fragment在Android 3.0( API 11)引入,是为了支持在大屏上显示更加动态.灵活的UI,比如在平板和电视上.Fragment可以看作是嵌套的Activity,类似ActivityG ...