js实现页面滚动到指定位置触发动画

最新推荐文章于 2024-07-20 13:48:02 发布
最新推荐文章于 2024-07-20 13:48:02 发布
阅读量1.1w 收藏 33
点赞数 15
分类专栏： js 文章标签： js 滚动动画 自定义动画 页面滚动指定位置动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Polaris_tl/article/details/89959497
版权

js实现页面滚动触发动画


最近公司做页面，老板说要让页面动起来，这样看起来帅一点，于是就开始了这个小得案例。
本来有个很好用的滚动插件 aos.js，但觉得自己的案例里面动画效果基本都是同一个，就想自己写。
话不多说，上代码 

//说明：
   //使用：在需要添加动画的元素上添加 myAnim='xxx'属性 
   //其他属性    myTime：动画时间  myDelay：动画延迟 myTarget:由父元素触发动画（id选择器）
   //动画选项 :flip l2r r2l zoomIn fade spinIn
   $(function () {
       //0.8 为添加动画元素的顶部距离屏幕顶部的距离 单位%  即动画何时触发
       var perc = 0.8;

       var flipList = $("[myAnim='flip']") 
       var l2rList = $("[myAnim='l2r']") 
       var r2lList = $("[myAnim='r2l']") 
       var zoomInList = $("[myAnim='zoomIn']") 
       var fadeList = $("[myAnim='fade']") 
       var spinInList = $("[myAnim='spinIn']")

       //防止在浏览到页面中部点击刷新网页时，如果不滚动页面会出现空白内容
       $(document).ready(function(){
           var scrollEvent = new Event('scroll');
           window.dispatchEvent(scrollEvent);
       });
         
       // 初始化添加了自定义动画的css
       (function(){
           if (flipList.length > 0) {
               Array.prototype.forEach.call(flipList, function (ele) {
                   ele.style.transition = "all 0"
                   ele.style.transform = "rotateY(180deg)";
                   ele.style.opacity = 0;
               })
           }
           if (l2rList.length > 0) {
               Array.prototype.forEach.call(l2rList, function (ele) {
                   ele.style.transition = "all 0"
                   ele.style.transform = "translateX(-300px)";
                   ele.style.opacity = 0;
               })
           }
           if (r2lList.length > 0) {
               Array.prototype.forEach.call(r2lList, function (ele) {
                   ele.style.transition = "all 0"
                   ele.style.transform = "translateX(300px)";
                   ele.style.opacity = 0;
               })
           }
           if (zoomInList.length > 0) {
               Array.prototype.forEach.call(zoomInList, function (ele) {
                   ele.style.transition = "all 0"
                   ele.style.transform = "scale(0)";
                   ele.style.opacity = 0;
               })
           }
           if (fadeList.length > 0) {
               Array.prototype.forEach.call(fadeList, function (ele) {
                   ele.style.transition = "all 0"
                   ele.style.opacity = 0;
               })
           }
           if (spinInList.length > 0) {
               Array.prototype.forEach.call(spinInList, function (ele) {
                   ele.style.transition = "all 0"
                   ele.style.transform = "rotate(-180deg) scale(0.4)";
                   ele.style.opacity = 0;
               })
           }
       })()
       window.addEventListener('scroll', function () {
           if (flipList.length > 0) {
               Array.prototype.forEach.call(flipList, function (ele) {
                   var duration = ele.getAttribute("myTime") || "1000ms";
                   var delay = ele.getAttribute("myDelay") || "0ms";
                   var target_id = ele.getAttribute("myTarget") || undefined;
                   var target = document.getElementById(target_id);
                   if (isInscreen(target, perc) || isInscreen(ele, perc)) {
                       ele.style.transitionDuration = duration;
                       ele.style.transitionDelay = delay;
                       ele.style.transitionProperty = "all"
                       ele.style.opacity = 1;
                       ele.style.transform = "rotateY(360deg)"
                   }
               })
           }
           if (l2rList.length > 0) {
               Array.prototype.forEach.call(l2rList, function (ele) {
                   var duration = ele.getAttribute("myTime") || "1000ms";
                   var delay = ele.getAttribute("myDelay") || "0ms";
                   var target_id = ele.getAttribute("myTarget") || undefined;
                   var target = document.getElementById(target_id);
                   if (isInscreen(target, perc) || isInscreen(ele, perc)) {
                       ele.style.transitionDuration = duration;
                       ele.style.transitionDelay = delay;
                       ele.style.transitionProperty = "all"
                       ele.style.opacity = 1;
                       ele.style.transform = "translateX(0px)"
                   }
               })
           }
           if (r2lList.length > 0) {
               Array.prototype.forEach.call(r2lList, function (ele) {
                   var duration = ele.getAttribute("myTime") || "1000ms";
                   var delay = ele.getAttribute("myDelay") || "0ms";
                   var target_id = ele.getAttribute("myTarget") || undefined;
                   var target = document.getElementById(target_id);
                   if (isInscreen(target, perc) || isInscreen(ele, perc)) {
                       ele.style.transitionDuration = duration;
                       ele.style.transitionDelay = delay;
                       ele.style.transitionProperty = "all"
                       ele.style.opacity = 1;
                       ele.style.transform = "translateX(0px)"
                   }
               })
           }
           if (zoomInList.length > 0) {
               Array.prototype.forEach.call(zoomInList, function (ele) {
                   var duration = ele.getAttribute("myTime") || "1000ms";
                   var delay = ele.getAttribute("myDelay") || "0ms";
                   var target_id = ele.getAttribute("myTarget") || undefined;
                   var target = document.getElementById(target_id);
                   if (isInscreen(target, perc) || isInscreen(ele, perc)) {
                       ele.style.transitionDuration = duration;
                       ele.style.transitionDelay = delay;
                       ele.style.transitionProperty = "all"
                       ele.style.opacity = 1;
                       ele.style.transform = "scale(1)"
                   }
               })
           }
           if (fadeList.length > 0) {
               Array.prototype.forEach.call(fadeList, function (ele) {
                   var duration = ele.getAttribute("myTime") || "1000ms";
                   var delay = ele.getAttribute("myDelay") || "0ms";
                   var target_id = ele.getAttribute("myTarget") || undefined;
                   var target = document.getElementById(target_id);
                   if (isInscreen(target, perc) || isInscreen(ele, perc)) {
                       ele.style.transitionDuration = duration;
                       ele.style.transitionDelay = delay;
                       ele.style.transitionProperty = "all"
                       ele.style.opacity = 1;
                   }
               })
           }
           if (spinInList.length > 0) {
               Array.prototype.forEach.call(spinInList, function (ele) {
                   var duration = ele.getAttribute("myTime") || "1000ms";
                   var delay = ele.getAttribute("myDelay") || "0ms";
                   var target_id = ele.getAttribute("myTarget") || undefined;
                   var target = document.getElementById(target_id);
                   if (isInscreen(target, perc) || isInscreen(ele, perc)) {
                       ele.style.transitionDuration = duration;
                       ele.style.transitionDelay = delay;
                       ele.style.transitionProperty = "all"
                       ele.style.transform = "rotate(-360deg) scale(1)"
                       ele.style.opacity = 1
                   }
               })
           }
       })

       function isInscreen(ele, perc) {
           if(ele == undefined) return false
           // 元素距离可视窗口的顶部的距离
           var boxTop
           boxTop = ele.getBoundingClientRect().top;
           // 窗口的总高度
           var screenHeight = window.screen.availHeight;
           var realPenc = boxTop / screenHeight
           if (realPenc < perc) {
               return true
           }
           return false
       }
   })

自己预定了几个动画flip, l2r ,r2l ,zoomIn,fade spinIn，你也可以自己动手写自己的。
看起来代码较多，其实好多都是重复写的动画部分，我认为关键的就function isInScreen(ele, perc){...}这部分——判断元素是否出现在可视窗口中；剩余的就是通过if来加上相应的动画了

使用方法：

  • 依赖JQuery
  • 在需要添加动画的地方加上 myAnim="xxx" 的属性，如<div myAnim="zoomIn"></div>
  • 其他可选参数

myTime="xxx" 动画时长
myDelay="xxx" 动画延迟 单位ms
myTarget="id" 动画的触发元素 默认为当前元素
（这部分你也可以添加一些自定义参数，照着来就好）

其他

  • 这是我的第一篇文章，希望大家多多鼓励
  • 大家可以尝试结合animate.css来写动画部分，可能会更棒，我这里没用animate方法
  • 如果有好的建议，可以到我GitHub地址 https://github.com/Polaris-tl/scrollAnimate.git
Polaris_tl
关注
  • 15
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
利用jquery制作滚动到指定位置触发动画
11-26
标题 "利用jQuery制作滚动到指定位置触发动画" 涉及的核心技术是结合jQuery库和CSS3动画来实现一个动态效果，当页面滚动到特定位置时触发一个动画。这个功能在现代移动设备上表现良好，但可能不适用于所有版本的...
js 延迟加载页面图片（当图片出现在窗口可视区域的时候加载）
banyu06120的专栏
06-18 300
简单Jquery代码，实现图片延迟加载. <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ showimg();//加载第一屏 $(windo...
vue3+ts+wow.js实现页面滚动到屏幕可视区域再显示过渡动画
Fantasywt的博客
04-26 1057
vue3+ts引入wow.js实现当页面滚动到可视区域再显示元素过渡动画
JS 滚动条控制
最新发布
weixin_45456477的博客
07-20 513
缺点：需要添加不必要的属性，且不能控制距离顶部的偏移量，如果顶部有遮盖层，会被遮盖。当产生滚动条的元素不是windows元素时,window.scrollTo就会失效。优点：可以控制元素滑到顶部后的偏移量，且可以添加smooth值让滚动变得丝滑。此时我们需要先获取产生滚动条的父元素，将window替换为这个父元素。缺点：如果页面情况更加复杂，此方案还是会产生不可预料的问题。缺点：需要知道产生滚动条的元素，否则无法生效。优点：代码简单，可靠性高。缺点：不能指定偏移量。
使用scrollTo/scrollTop让页面元素滚动到指定位置, 并设置滚动动画
热门推荐
small_white_123的博客
06-10 4万+
如何让子元素滚动到指定父窗口的指定位置什么是滚动距离读取滚动距离如何设置滚动scrollTop属性scrollTo方法 什么是滚动距离 比如父元素设置了overflow: hidden;, 当元素里的内容超过元素本身的高度时, 就会出现滚动条, 那么鼠标滑动的距离就是其滚动距离. 读取滚动距离 <head> <title>test</title> <style> ul { width: 200px;
页面滚动到浏览器可视区域动画播放
qq_42644893的博客
03-05 485
//可视区域的高 window.innerHeight || doucument.documentElement.clientHeight || document.body.clientHeight //整个网页的高(不包括边框) docunment.body.scrollHeight; //整个网页的高(包括边框) docunment.body.offsetHeight; //整个网页的滚动距离 document.body.scrollTop document.body.scrollleft .
jQuery页面上下滚动触发区块动画特效
06-10
**jQuery页面上下滚动触发...通过以上步骤，我们可以实现一个富有弹性动感的页面上下滚动触发区块动画特效，为网站增添生动性和互动性。在实际开发中，还需要根据具体需求进行调整和优化，以确保动画的性能和用户体验。
js，jquery滚动/跳转页面到指定位置的实现思路
12-04
在JavaScript和jQuery中，实现页面滚动到指定位置的需求可以通过多种方式来解决。本文将详细介绍如何使用锚点、隐藏锚点、ID以及jQuery的animate方法来完成这一任务。 首先，我们来回顾一下基本的锚点机制。锚点是...
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
10-17
在本文中，我们探讨了如何使用Vue框架实现滚动条滚动到指定位置时，页面上的数字进行tween动画特效。tween动画是一种在两个值之间创建平滑过渡效果的动画技术。Vue作为一个流行的前端框架，提供了丰富的功能来实现...
Animate.css+wow.js实现页面滚动到可视区显示动画效果
几百块的博客
11-01 3248
今天看迅雷官网 https://www.xunlei.com/v2018/dist/aboutus.html 实现的滚动到可视区域后显示动画，自己之前没做过这种，非常感兴趣，然后问小伙伴， 大部分都没做过类似的，于是乎我只能自己查了 第一想到的是swiper，之前写轮播图用过。 https://www.swiper.com.cn/ https://www.swiper.com.cn/usage/animate/index.html 但是引入了之后 发现不是特别适合我 而且还有5版本6版本一系列写法兼容问
原生js利用鼠标滚轮实现滚动到当前页面实现动画效果
小白变怪兽
12-04 1万+
滚滚屏 原生js 动画 滚轮 mousewheel
基于微信小程序wepy中 scroll-view滚动到指定位置（定位到id位置，使用 scroll-into-view）附带三层下拉框例子
weixin_43923808的博客
03-10 3962
<scroll-view style="height:500rpx" scroll-y="true" scroll-with-animation="true" scroll-into-view="bottomView{{selectedObj[currentTab.value][1].value}}"> .
监听页面滚动到指定位置进行动画
qq_53865343的博客
04-11 540
今天遇到的问题是页面滚到到指定区域，给背景图片添加一个向左移动的动画，刚开始是使用的是wow加上animated动画，但是存在还没有滚动到该区域的时候就已经完成了动画的问题。所以后面考虑使用js来监听滚动的距离，然后添加动画的类。//监控窗口已滚动的距离;可以log打印一下a,b,c,d，然后找到指定位置的offset值，就可以实现了。//浏览器窗口的高度*/// 监听鼠标滚动到指定位置进行动画。
【原生JS】写滚动指定位置展示动画
Fate
03-12 2181
用原生js做滚动到指定位置展示动画，动画效果用Animate.css 直接上代码 &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&amp;amp;amp;am
JavaScript实现页面到滚动到指定位置执行某些操作
阿龙的博客
10-29 2744
使用JavaScript实现页面滑动到指定位置加载动画。 若页面滚动到class名为group-pic的元素的位置时开始加载 使用JavaScript实现页面滑动到指定位置加载动画。 若页面滚动到class名为group-pic的元素的位置时开始加载 $(document).ready(function(){     var a,b,c;     a = $(window).height(...
原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用
likeYou1207的博客
06-23 9119
废话不多说，直接上代码，附用法，纯博主手写，看完后，觉得好左上角请点个赞,觉得不好的请留下您的建议，谢谢（此代码改版很方便，大家可以任意发挥） （注意：如果不想自己写动画的，可以引入Animate.css 相信这个动画库大家都不陌生） body{overflow-x: hidden;} div{width: 100px;height: 100px;margin: 100px auto 0;...
JavaScript_窗口的操作
cenyebao的专栏
02-10 450
窗口移动动画                      var bounce = {                 x: 0, y: 0, w: 200, h: 200, // Window position and size;                 dx: 5, dy: 5, // Window velocity(速度)_移动距离;                 inte
页面滚动到可视区域时展示动画
大哼的小世界
09-03 1432
https://segmentfault.com/q/1010000007517414?_ea=1369914
html如何设置滚动动画,JavaScript 实现页面滚动动画
05-04
HTML中可以通过设置CSS属性来实现滚动动画，具体实现方法如下： 1. 在CSS文件中设置元素的初始状态，如opacity、transform等属性。 2. 使用CSS的transition或animation属性来添加动画效果。 3. 在JavaScript中通过scroll事件监听页面滚动，当页面滚动到特定位置时，添加或移除CSS类来触发动画效果。 下面是一个简单的示例代码： HTML: ``` <div class="box"></div> ``` CSS: ``` .box { width: 100px; height: 100px; background-color: red; opacity: 0; transform: translateY(50px); transition: all 0.5s ease; } .box.show { opacity: 1; transform: translateY(0); } ``` JavaScript: ``` window.addEventListener('scroll', function() { var box = document.querySelector('.box'); var boxTop = box.offsetTop; var boxHeight = box.offsetHeight; var windowHeight = window.innerHeight; if (window.pageYOffset > boxTop - windowHeight + boxHeight / 2) { box.classList.add('show'); } else { box.classList.remove('show'); } }); ``` 上面的代码实现了当页面滚动到.box元素的一半时，添加.show类，触发滚动动画效果。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值