钉钉官网的特效，自己的完成起来还是比较复杂。以下是它交互逻辑，

  • 进入状况

超轻的页面滚动库 lax.js

  • logo 上移翻滚状况

超轻的页面滚动库 lax.js

  • 开端打开状况

超轻的页面滚动库 lax.js

  • 绝大部分内容打开状况

超轻的页面滚动库 lax.js

  • 悉数打开状况

超轻的页面滚动库 lax.js

动画需求综合分析

  • 中心：页面翻滚触发动画
  • 页面翻滚 钉钉 logo + description 产生 方位/大小/透明度 等 css 改变。
  • 当 钉钉 logo 开端消失，钉钉的内部的常用功用开端展示，从一个中心方位，随着页面的翻滚开端移动到自己的方位。形成一个列表。

lax.js

首先要搞明白 lax.js 是什么？ Lax.js 自己这样说：

Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll. 轻量级的原生 js 库，为了在翻滚时创建滑动美丽的动画。

一个简略的 lax.js 源码提取

超轻的页面滚动库 lax.js

lax 采用了 js 的面向目标的方式，办理代码，本质上 lax.js 是一个 立即履行函数，对外输出的是 lax 的实例。运用时分需求先调用 init 办法。

安装

<npm_manager> install lax.js

假如运用 typescript 需求声明 lax.js

基本概念

驱动器 Driver

翻滚驱动器是用于核算页面元素的翻滚作用的组件. 默许情况下，Lax.js 供给了一些预定义的翻滚驱动器（如 scrollY、scrollX、scrollTop、scrollBottom、scrollRight 等），但用户能够运用 lax.addDriver 办法增加自己的翻滚驱动器来完成更加复杂的翻滚作用。

lax.addDriver(
  'scrollY',                          // Driver name
  function(laxFrame) {                     
    return window.scrollY    // Value method
  },
  {
    inertiaEnabled: false
    frameStep: 1
  }                                 // Options
)

翻滚元素

lax.js 中，需求增加翻滚元素 lax.addElements：

lax.addElements(
  '.selector',  // Element selector rule
  {             // Animation data
    scrollY: {  
      opacity: [
        [0, 100],
        [1, 0]
      ]
    }
  },
  {             
    style: {}   // Element options
  }
)
  • 第一个元素是 css 选择器。
  • 第二个参数是 Lax.js 支撑或许自定义的 css 特点目标，通过装备此目标，Lax.js 的翻翻滚画行为。
  • 第三个参数是 Lax.js 的 options (可选):
    • transform: 给元素增加静态的 CSS 特点
    • elements: 传递对原始 DOM 元素的引用以答应更灵敏的选择形式。
    • onUpdate: 一种运用当时 driverValues 和 domElement 调用每一帧的办法。

翻滚元素 scrollY 的特点解读

  • opacity: 一个数组表示翻滚的方位 [p1, p2, p3, ...] 。
  • 第二位 表示 opacity 的特点详细的值 [0, 1, 0] 详细的特点值。

支撑的 CSS 特点

名字
不透明度 opacity
规划X scaleX
比例Y scaleY
规划 scale
倾斜X skewX
倾斜Y skewY
倾斜 skew
旋转X rotateX
旋转Y rotateY
旋转 rotate
翻转X translateX
翻转Y translateY
翻转Z translateZ
含糊 blur
色彩旋转 hue-rotate
亮度 brightness

特别值

能够运用的特别的值

键 值
screenWidth 屏幕当时的宽度
screenHeight 屏幕当时的高度
pageWidth 文档的宽度
pageHeight 文档的高度
elWidth 元素的宽度
elHeight 元素的高度
elInY 当元素出现在屏幕底部时的窗口 scrollY 方位
elOutY 当元素消失在屏幕顶部时的窗口 scrollY 方位
elCenterY 当元素垂直居中于屏幕时的窗口 scrollY 方位
elInX 当元素出现在屏幕右侧时的窗口 scrollX 方位
elOutX 当元素消失在屏幕左侧时的窗口 scrollX 方位
elCenterX 当元素水平居中于屏幕时的窗口 scrollX 方位
index 运用 lax.addElements 增加元素时的元素索引

支撑的动画

以下是每个缓动函数的解说，运用表格格式：

Name Description
easeInQuad 开端时动画缓慢，然后逐步加快。
easeOutQuad 开端时动画快速，然后逐步减速。
easeInOutQuad 开端时动画缓慢，然后加快，再减速完毕。
easeInCubic 开端时动画缓慢，然后逐步加快。
easeOutCubic 开端时动画快速，然后逐步减速。
easeInOutCubic 开端时动画缓慢，然后加快，再减速完毕。
easeInQuart 开端时动画缓慢，然后逐步加快。
easeOutQuart 开端时动画快速，然后逐步减速
easeInOutQuart 开端时动画缓慢，然后加快，再减速完毕。
easeInQuint 开端时动画缓慢，然后逐步加快。
easeOutQuint 开端时动画快速，然后逐步减速。
easeInOutQuint 开端时动画缓慢，然后加快，再减速完毕。
easeOutBounce 动画完毕时会反弹回来，类似于绷簧的作用。
easeInBounce 开端时动画缓慢，然后快速反弹，再逐步减速到终点。
easeOutBack 动画完毕时会超越终点一些间隔，然后返回终点。
easeInBack 开端时动画缓慢，然后超越起点一些间隔，然后返回起点。

基本运用

  • 调用 init 办法
  • 增加 Driver 驱动器（）
  • 增加元素

Ract 中运用 lax.js

import { useEffect } from "react";
import lax from "lax.js";
import "~/styles/cursor.css";
export default function HTMLInlineRoute() {
  useEffect(() => {
    lax.init();
    lax.addDriver("scrollY", function () {
      return window.scrollY;
    });
    return () => {
      lax.removeElement();
    };
  }, []);
  return (
    <div className="square lax lax_preset_spin:400:360 lax_preset_flipX"></div>
  );
}

在 Remix 中完成一个简答的翻滚作用

import React, { useEffect } from "react";
import lax from "lax.js";
import "~/styles/lax.css";
import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction } from "@remix-run/node";
export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];
function Example() {
  useEffect(() => {
    lax.init();
    lax.addDriver("scrollY", function () {
      return window.scrollY;
    });
    lax.addElements(
      ".box",
      {
        scrollY: {
        translateX: [[0, "screenHeight/3", "screenHeight"], [-300, 0, 300]],
          opacity: [[0, "screenHeight/3", "screenHeight"], [1, 1, 0]],
          scale: [[100, "screenHeight"], [0.25, 1]],
        },
      }
    );
  }, []);
  return (
    <div className="wrap" style={{
      background: '#000',
      color: '#fff'
    }}>
      <div style={{ width: '100%',  height: '100vh', background: '#ff0'}}></div>
      <div className="box">
        <img
          alt="dd"
          src="/your_icon.png"
        />
        <div>your description </div>
      </div>
    </div>
  );
}
export default Example;

同类库类引荐

  • scrollmagic 根据翻滚的动画库，它能够让你在翻滚页面时增加各种动画作用。它十分灵敏，能够与其他库和框架一起运用。
  • AOS 根据翻滚的动画库，它能够让你在翻滚页面时增加各种动画作用。它支撑各种类型的动画作用，包括突变、旋转、缩放等。它的 API 简略易用，并且能够与其他库和框架一起运用。
  • skrollr 根据翻滚的动画库，它能够帮助你创建各种各样的翻滚作用。它支撑各种类型的翻滚，包括平移、旋转、缩放等。