模拟钉钉官网动画

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

相关推荐
脑袋大大的17 小时前
每日钉钉API探索:chooseDepartments专注于部门维度的选择接口
钉钉·企业应用开发·数字化进程·钉钉api
脑袋大大的2 天前
钉钉小程序开发环境配置与前端开发指南
小程序·钉钉·企业应用开发
脑袋大大的2 天前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
市象2 天前
钉钉拿飞书当靶
钉钉·飞书
脑袋大大的6 天前
钉钉企业应用开发技巧:查询表单实例数据新版SDK指南
java·钉钉·企业应用开发
脑袋大大的6 天前
钉钉企业应用开发技巧:在单聊会话中实现互动卡片功能
服务器·microsoft·钉钉·企业应用开发
zandy101111 天前
衡石科技chatbot分析手册--钉钉数据问答机器人配置
科技·机器人·钉钉·chatbot·衡石科技
JAVA拾贝11 天前
Prometheus+Grafana运维监控并实现钉钉告警
运维·钉钉·grafana·prometheus·运维监控
yunson_Liu24 天前
服务器获取外网IP,并发送到钉钉
服务器·钉钉
lgbisha1 个月前
华为云Flexus+DeepSeek征文|体验华为云ModelArts快速搭建Dify-LLM应用开发平台并创建自己dify钉钉群聊机器人
人工智能·ai·语言模型·自然语言处理·机器人·华为云·钉钉