lax.js

简单而轻量级javascript插件，可以为网站创造丝滑漂亮的滚动效果

demo：https://alexfox.dev/lax.js/

1、将lax.js添加到html中，不依赖第三方库

<script src="lib/lax.min.js" >

2、初始化插件

<script type="text/javascript">

window.onload = function() {

    lax.setup() // init

    const updateLax = () => {

        lax.update(window.scrollY)

        window.requestAnimationFrame(updateLax)

    }

    window.requestAnimationFrame(updateLax)

}

</script>

3、说明

modValue: number | undefined

将此选项设置为对驱动程序的值进行模数运算，例如，如果要在驱动程序值继续增加时循环动画值。

frameStep: number = 1

默认情况下，每个动画在每个动画帧更新其值，大约每秒更新60次。可以使用frameStep来降低动画更新的频率。例如，值为2时每秒只更新约30次，值为60时每秒只会更新约一次。

inertia: number

用于为动画添加惯性。与inertiaEnabled驱动程序选项结合使用。

inertiaMode: "normal" | "absolute"

与惯性结合使用。如果设置为绝对值，则通过Math.abs运算符惯性值将始终为正数。

cssUnit: string = ""

定义要附加到值末尾的单位，例如px deg

cssFn: (value: number, domElement: DomElement) => number | string

一些CSS属性需要更复杂的字符串作为值。例如，随机变换角度，随机变色。

easing: string

动画缓动

4、性能优化

1、Lax.js被设计为具有性能，但在创建网站时，有一些事情需要牢记。较小的元素表现更好。

2、fixed 和 absolute的性能最好，因为它们在更新时不会触发布局更改。

3、屏幕外元素不需要更新，因此在创建动画值贴图时请考虑这一点。

4、css属性blur、hue-rotate、brightness是图形密集型的，运行不如其他属性流畅。

5、CSS 属性

CSS属性要设置动画的CSS属性的名称，例如不透明度或旋转。请在此处查看支持的属性列表。

一些CSS属性，例如box shadow，需要一个自定义函数来构建样式字符串。要执行此操作，请使用cssFn元素选项。

opacity  //不透明度

scaleX  //缩放X

scaleY  //缩放Y

scale  //缩放

skewX  //歪曲X

skewY  //歪曲Y

skew  //歪曲

rotateX  //旋转X

rotateY  //旋转Y

rotate  //旋转

translateX  //翻译X

translateY  //平移Y

translateZ  //平移Z

blur  //模糊效果

hue-rotate  //色相旋转

brightness  //亮度

6、特殊值

screenWidth    //屏幕的当前宽度

screenHeight   //屏幕的当前高度

pageWidth      //文档的宽度

pageHeight     //文档的高度

elWidth        //元素的宽度

elHeight       //元素的高度

elInY          //元素将出现在屏幕底部时，elInY窗口滚动Y位置

elOutY         //元素将在屏幕顶部消失时，elOutY窗口滚动Y位置

elCenterY     //当元素在屏幕上垂直居中时，elCenterY窗口滚动Y位置

elInX   //窗口滚动元素将出现在屏幕右侧时的X位置

elOutX   //窗口滚动元素将在屏幕左侧消失时的位置

elCenterX  //窗口滚动元素在屏幕上水平居中时的窗口滚动X位置

index  //使用添加时元素的索引 lax.addElements

7、CSS 缓动

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeOutBounce

easeInBounce

easeOutBack

easeInBack

7、预设生成器

https://alexfox.dev/lax.js/preset-explorer

fadeIn  //淡入

fadeOut  //淡出

fadeInOut  //淡入淡出

scaleIn  //缩放入

scaleOut  //缩放出

scaleInOut  //缩放出入

slideX  //滑动X

slideY  //滑动Y

jiggle  //抖动

seesaw  //跷跷板

zigzag  //之字形运动

hueRotate  //色调旋转

spin  //快速旋转

flipX  //翻转X

flipY  //翻转Y

blurIn  //模糊入

blurOut  //模糊出

blurInOut  //模糊出入

预设的使用方法

<div class="fan lax lax_preset_spin:1000:360" ></div>