使用Lax.js实现鼠标跟随动画效果的技术解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00232/article/details/148415536

使用Lax.js实现鼠标跟随动画效果的技术解析

lax.js Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll. 项目地址: https://gitcode.com/gh_mirrors/la/lax.js

前言

在现代网页设计中，交互式动画已经成为提升用户体验的重要手段。Lax.js作为一个轻量级的JavaScript库，专门用于创建基于滚动的动画效果。本文将重点解析如何利用Lax.js实现鼠标跟随动画效果，通过技术分解帮助开发者理解其实现原理。

核心概念：Lax.js的驱动机制

Lax.js的核心在于其"驱动(Driver)"机制，它允许开发者定义各种输入源，然后将这些输入源映射到元素的动画属性上。在鼠标跟随示例中，我们主要使用了三种自定义驱动：

cursorX：跟踪鼠标X轴位置
cursorY：跟踪鼠标Y轴位置
cursorDistanceFromCenter：计算鼠标距离页面中心的相对距离

实现步骤详解

1. 初始化Lax.js

首先需要初始化Lax.js库：

window.onload = function () {
  lax.init()
  // 后续代码...
}

2. 设置鼠标移动监听器

通过监听mousemove事件获取鼠标坐标：

document.addEventListener('mousemove', function (e) {
  lax.__cursorX = e.clientX
  lax.__cursorY = e.clientY
}, false)

这里将鼠标坐标存储在Lax.js的内部变量__cursorX和__cursorY中。

3. 创建自定义驱动

定义三个自定义驱动，将鼠标位置数据提供给Lax.js系统：

// X轴驱动
lax.addDriver('cursorX', function () {
  return lax.__cursorX || 0
})

// Y轴驱动
lax.addDriver('cursorY', function () {
  return lax.__cursorY || 0
})

// 距离中心点驱动
lax.addDriver('cursorDistanceFromCenter', function () {
  var pageHeight = document.body.scrollHeight
  var pageWidth = document.body.scrollWidth
  var pageCenterX = pageWidth / 2
  var pageCenterY = pageHeight / 2
  
  // 计算相对距离(0-1范围)
  var absDistanceFromCenterY = Math.abs((lax.__cursorY || 0) - pageCenterY) / pageCenterY
  var absDistanceFromCenterX = Math.abs((lax.__cursorX || 0) - pageCenterX) / pageCenterX
  
  return absDistanceFromCenterX + absDistanceFromCenterY
})

cursorDistanceFromCenter驱动特别有趣，它计算鼠标距离页面中心的相对距离，返回一个0到2之间的值(0表示在中心，2表示在角落)。

4. 应用动画效果

将驱动应用到元素上，创建视觉动画效果：

lax.addElements(".text", {
  'cursorX': {
    "translateX": [
      [0, 'screenWidth'],          // 输入范围(鼠标X坐标)
      ['index * 10', 'index * -10'], // 输出范围(基于元素索引的偏移量)
    ],
  },
  'cursorY': {
    "translateY": [
      [0, 'screenHeight'],
      ['index * 10', 'index * -10'],
    ],
  },
  'cursorDistanceFromCenter': {
    "scale": [
      [0, 1],                      // 输入范围(距离中心0-1)
      [1, '1 + (index * 0.05 )'],  // 输出范围(基于索引的缩放)
    ],
  }
})

这里有几个关键点：

每个.text元素都会根据鼠标位置进行位移和缩放
index变量表示元素在集合中的位置索引
不同颜色的文本层会产生视差效果

5. 背景色相旋转

对容器元素应用色相旋转滤镜，创建色彩变化效果：

lax.addElements(".container", {
  'cursorX': {
    "filter": [
      [0, 'screenWidth'],
      [0, 'screenWidth/2'],
      {
        "cssFn": (val) => {
          return `hue-rotate(${val % 360}deg)`
        }
      }
    ],
  },
})

这里使用自定义CSS函数，根据鼠标X坐标应用hue-rotate滤镜，产生色彩循环变化的效果。