为Astro Card添加鼠标跟随动效

效果预览

您可以在 https://www.dailynotes.top/ 实时预览此动效。

原理

在相关代码中，我们会使用源自astro官方的JS库 astrojs/solid-js 和 solid-js 。

实现这个动效很简单，这仅是一个 React 组件，用于处理鼠标移动事件，并根据鼠标的位置动态设置Card的CSS变量，从而实现光晕跟随鼠标移动的交互效果。

步骤

创建 src/components/ScriptComp.tsx ，写入以下内容

import type { Component } from "solid-js";
export const ScriptComp: Component = () => {
    const handleOnMouseMove = (e: any) => { // 截取目标元素
        const { currentTarget: target } = e;
        if (!target) return;
        const rect = target.getBoundingClientRect(),
            x = e.clientX - rect.left,  // 即时获取鼠标x,y坐标
            y = e.clientY - rect.top;
        target.style.setProperty("--mouse-x", `${x}px`); // 根据鼠标坐标更改css属性，下同
        target.style.setProperty("--mouse-y", `${y}px`); 
    };
    for (const card of document.querySelectorAll(".card")) { // 遍历astro的.card元素
        //@ts-ignore
        card.onmousemove = (e) => handleOnMouseMove(e); // 添加事件监听器
    }
    return <></>
}

同时需要我们在应用页面添加以下内容

import { ScriptComp } from "../../components/ScriptComp";

~~~

</CardGrid>
<ScriptComp client:only="solid-js" />

你还需要在astro的 tsconfig.json 和astro.config.mjs内修改配置为

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
}

import solid from '@astrojs/solid-js';
~~~
export default defineConfig({
	integrations: [
		solid(),
        ~~~

搞定。