大家好啊，这里是梦兽编程。我的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 属性

特殊值

可以使用的特殊的值

支持的动画

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