模拟钉钉官网动画

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

相关推荐
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
测开小菜鸟1 小时前
使用python向钉钉群聊发送消息
java·python·钉钉
小华同学ai17 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
qq_344403452 天前
钉钉内集成第三方免密登录(Vue+.Net)
钉钉
市象2 天前
钉钉向广告低头
互联网·钉钉·企业办公
国通快递驿站4 天前
AntFlow一款开源免费且自主可控的仿钉钉工作流引擎
开源·钉钉·antflow
Dark_programmer4 天前
uni-app - - - - - 钉钉小程序 uni.showToast回调函数不执行问题(PC端钉钉小程序 接口API回调函数不执行)
小程序·uni-app·钉钉
weixin_449310847 天前
利用钉钉与金蝶云星空进行付款单自动化集成
运维·自动化·钉钉
CL_IN7 天前
钉钉日常报销单与金蝶云星空集成技术详解
前端·数据库·钉钉
猫姐°7 天前
python实现钉钉群机器人消息通知(消息卡片)
python·机器人·钉钉