模拟钉钉官网动画

实现思路:利用粘性定位sticky,以及滚动事件实现。首先我们应该设置滚动动画开始位置和结束位置 ,然后根据位置计算透明度或者transform,scale的值。

首先根据上述图线计算属性值,代码如下:

javascript 复制代码
function createAnimate(scrollStart, scrollEnd, valueStart, valueEnd) {
      return function (x) {
        if (x < scrollStart) {
          return valueStart;
        }
        if (x > scrollEnd) {
          return valueEnd;
        }
        const bili = (valueEnd - valueStart) / (scrollEnd - scrollStart);
        return bili * (x - scrollStart) + valueStart;
      };
    }

然后考虑到每个dom它的动画不是只有一个属性可能有多个,例如scale,opacity,transform等。然后应该将dom和属性存储到map集合中,key为dom,属性为value。

javascript 复制代码
const items = document.querySelectorAll('.list-item');
const animationMap = new Map();


const getTitleAnimation = (scrollStart, scrollEnd, dom) => {
      const opacityAnimation = createAnimate(scrollStart, scrollEnd, 1, 0);
      const yAnimation = createAnimate(scrollStart, scrollEnd, 0, -200);
      const transform = function (x) {
        return `translate(0,${yAnimation(x)}px)`;
      };
      const opacity = function (x) {
        return opacityAnimation(x);
      };
      return {
        transform,
        opacity,
      };
    };


const updateMap=()=>{
    for (const item of items) {
        animationMap.set(
          item,
          getTitleAnimation(scrollStart + 50, scrollEnd, item)
        );
      }
}

然后就是属性赋值:

javascript 复制代码
const updateStyles = () => {
      const scrollY = window.scrollY;
      for (const [dom, animations] of animationMap) {
        for (const prop in animations) {
          const value = animations[prop](scrollY);
          dom.style[prop] = value;
        }
      }
    };
updateStyles();
window.addEventListener('scroll', updateStyles);

全部代码访问: liuzicheng/web - Gitee.com

相关推荐
爱健身的小刘同学2 天前
H5页面在钉钉浏览器上动态修改标题
前端·钉钉
国通快递驿站3 天前
AntFlow 0.11.0版发布,增加springboot starter模块,一款设计上借鉴钉钉工作流的免费企业级审批流平台
spring boot·后端·钉钉
HelpLook HelpLook4 天前
降本增效新策略:对比飞书和钉钉,HelpLook如何更灵活管理知识库访客权限?
人工智能·aigc·钉钉·飞书·企业知识库·ai知识库·访问权限
女王の专属领地5 天前
深入浅出《钉钉AI》产品体验报告
人工智能·钉钉·语音识别·ai协同办公
da pai ge6 天前
zabbix搭建钉钉告警流程
钉钉·zabbix
Dark_programmer6 天前
钉钉小程序 - - - - - overflow无效?
小程序·钉钉
肖老师xy6 天前
对接钉钉审批详情
钉钉
树下熊猫6 天前
企业案例:钉钉宜搭对接金蝶云星空
数据库·钉钉
国通快递驿站6 天前
AntFlow:一款高效灵活的开源工作流引擎
java·spring boot·后端·开源·钉钉
sun_weitao11 天前
钉钉扫码登录(DTFrameLogin) 用户注销后重新登录出现回调叠加的问题
前端·javascript·钉钉