首页 > 其他分享 >滚动条动画

滚动条动画

时间:2024-01-26 11:22:46浏览次数:25  
标签:动画 js 滚动条 start initEnd && initStart progress

使用到的js库

jquery.js
ScrollMagic.js 
gsap.js

页面引入js

使用动画

 

转换滚动数据的函数调用说明:

 函数:

function handleProgress({ start, end, progress, portions = 100, progressCallback, initStart, initEnd }) {
    if (progress < start) {
      initStart && initStart()
    }
    if (progress > end) {
      initEnd && initEnd()
    }
    // 区间内触发
    if (progress >= start && progress <= end) {
      // 把起点变成0
      let progressNum = progress - start;
      // 滚动区间距离值
      let interval = end - start;
      progressCallback && progressCallback(progressNum / (interval / portions))
    }
  }

 

调用函数:

 

 

 

标签:动画,js,滚动条,start,initEnd,&&,initStart,progress
From: https://www.cnblogs.com/chefweb/p/17988957

相关文章

  • elementUI表格滚动条样式修改,隐藏表格右边留白
    修改滚动条样式//设置滚动条的宽度.el-table__body-wrapper::-webkit-scrollbar{width:4px;}//设置滚动条的背景色和圆角.el-table__body-wrapper::-webkit-scrollbar-thumb{background-color:#535353;-webkit-box-shadow:inset005pxrgba(0,0,0,0.2......
  • c#dataGridView控件水平滚动条不显示的原因
    https://blog.csdn.net/weixin_44899642/article/details/128791899c#dataGridView控件水平滚动条不显示的原因1.最主要的在dataGridView控件属性中的ScrollBars是否设为BothBoth代表水平和垂直方向根据实际需求自动显示滚动条None代表水平和垂直都不显示滚动条Vertical代表......
  • WPF动画
    1、DoubleAnimationprivatevoidRunAnimation(UIElementelement,DependencyPropertydp,doubleoldValue,doublenewValue,doubledurationMs){varduration=newDuration(TimeSpan.FromMilliseconds(durationMs));vardoubleAnima......
  • 2024-1-22动画效果和部分方法
    目录动画效果each.each.data()动画效果//基本show([s,[e],[fn]])hide([s,[e],[fn]])toggle([s],[e],[fn])//滑动slideDown([s],[e],[fn])slideUp([s,[e],[fn]])slideToggle([s],[e],[fn])//淡入淡出fadeIn([s],[e],[fn])fadeOut([s],[e],[fn])fadeTo([[s],o,[e],[......
  • springboot自定义更换启动banner动画
    springboot自定义更换启动banner动画......
  • 【动画进阶】神奇的 3D 卡片反光闪烁动效
    最近,有群里在群里发了这么一个非常有意思的卡片Hover动效,来源于此网站--key-drop,效果如下:非常有意思酷炫的效果。而本文,我们不会完全还原此效果,而是基于此效果,尝试去制作这么一个类似的卡片交互效果:该效果的几个核心点:卡片的3D旋转跟随鼠标移动效果如何让卡片在Hove......
  • 给应用添加动画
    属性动画的使用 概述属性动画,是最为基础的动画,其功能强大、使用场景多,应用范围较广。常用于如下场景中:一、页面布局发生变化。例如添加、删除部分组件元素。二、页面元素的可见性和位置发生变化。例如显示或者隐藏部分元素,或者将部分元素从一端移动到另外一端。三、页......
  • 使用pyautogui向下滚动条到底
    使用pyautogui向下滚动条到底一、pyautogui简介pyautogui是一个用于模拟鼠标和键盘操作的Python模块,它可以用来自动化执行一些重复性的任务,提高工作效率。在这篇文章中,将学习如何使用pyautogui模块来实现向下滚动条到底的功能。二、安装pyautogui模块在使用pyautogui之前,需要......
  • 使用pyautogui向下滚动条到底
    使用pyautogui向下滚动条到底一、pyautogui简介pyautogui是一个用于模拟鼠标和键盘操作的Python模块,它可以用来自动化执行一些重复性的任务,提高工作效率。在这篇文章中,将学习如何使用pyautogui模块来实现向下滚动条到底的功能。二、安装pyautogui模块在使用pyautogui之前,需要先......
  • 电影动画用云渲染好吗?有什么优势
    动画电影的创作是一个将声音和图像融合以产生视觉故事的过程,电影通常是由一系列静止图像构成,其中每一幅静止图像称为一帧。动画电影的流畅度依赖于每秒播放的帧数,常见的帧率有25、60、90或120帧每秒等,具体取决于制片方的选择和制作标准。这些影片通常具有高分辨率,以及对细节的......