软件资源 为您的Astro站点Card添加鼠标跟随动效

实现原理​

在相关代码中，我们会使用源自 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(),
        ~~~

搞定！

 

[微光已验证会员]