模拟钉钉官网动画

实现思路:利用粘性定位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

相关推荐
Dark_programmer4 天前
钉钉小程序 - - - - - 小程序内打开OA文档链接
小程序·钉钉
热爱生活的五柒4 天前
系统代理开启时,钉钉页面加载失败
钉钉
阿三08124 天前
钉钉 AI 深度赋能制造业 LTC 全流程:以钉钉宜搭、Teambition 为例
人工智能·低代码·钉钉·teambition
极新4 天前
163起融资,梅卡曼德融资额夺冠,钉钉、百度智能云10周年,汉桑科技IPO| 2025年8月人工智能投融资观察 · 极新月报
科技·百度·钉钉
Dolphin_Home4 天前
IT需求提示未读信息查询:深度技术解析与性能优化指南【类似:钉钉已读 功能】
性能优化·钉钉
fruge5 天前
钉钉机器人消息发送 npm 库:ddmessage-fruge365
机器人·npm·钉钉
yfs10249 天前
钉钉补卡事件处理方案
java·数据库·钉钉
AI指北10 天前
每周AI看 | 微软开源VibeVoice-1.5B、OpenAI历史性交棒、网易云商出席AICon全球人工智能开发与应用大会
大数据·人工智能·ai·微软·钉钉·在线客服·ai agent
HillVue13 天前
无招想让钉钉重新酷起来
eclipse·钉钉
钉钉开发者社区13 天前
如何在阿里云百炼中使用钉钉MCP
阿里云·钉钉·mcp