大家好啊，这里是梦兽编程。我的b站正在做it相关的分享知识。以下网址是我的b站个人主页

space.bilibili.com/106325238

事情的经过

有一天，梦兽在网上冲浪的时候，在b站刷到这边一条视频。

出于好奇我认真的把这个视频看完了，看了一下up主的思路。他打算使用css3的过渡效果来做，而且已经做了一些dome出来。当他需要制作钉钉的特效的时候，发现怎么都无法实现。我认真思考了一下，发现这个题目是需要结合js监听滚动调的变化对css3的过渡属性进行动态设置才能制作完成。视频的博主只想利用简单的css3过渡效果去实现，那是没有办法的。所以导致他一个月做不出来破防了。

我的思路是有了，但出于平时工作的问题，up是一名webgl开发工程师，平时主要维护https://realibox.com/的在线编辑器。如果要自己实现一个监听滚动动态设置过渡的效果的css3的库貌似有对我的工作有貌似没多大帮助，只能是一个技术储备。

按照实现的思路，寻找开源库

于是我就按照监听滚动动态设置过渡的思路开始去“🐔”hub，寻找一对应于的开源库。

这个lax.js的dome官网alexfox.dev/lax.js/

官网的案列也是非常简单的

<!-- JS -->
<script>
  window.onload = function () {
    lax.init()

    // Add a driver that we use to control our animations
    lax.addDriver('scrollY', function () {
      return window.scrollY
    })

    // Add animation bindings to elements
    lax.addElements('.selector', {
      scrollY: {
        translateX: [
          ["elInY", "elCenterY", "elOutY"],
          [0, 'screenWidth/2', 'screenWidth'],
        ]
      }
    })
  }
</script>

<!-- HTML -->
<div class="selector">Hello</div>

这里只需要关心addElements这个方法,

 translateX: [
                  ["elInY", "elCenterY", "elOutY"], //这个是addDriver监听的属性值
                  [0, 'screenWidth/2', 'screenWidth'], //addDriver根据监听值的变化设置对应的过渡值
            ]
            ps: 一个元素可以设置多个属性，但是最终效果要怎么布局就要看你的算法怎么动态设置这个属性值

因为lax.js是一个轻量级的library库

lay.js 的一些属性翻译解读

支持的 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	开始时动画缓慢，然后超过起点一些距离，然后返回起点。