背景

在上一篇文章 《如何實(shí)現(xiàn)一個(gè)充滿科技感的官網(wǎng)（一）》 中，我們初步了解了該官網(wǎng)的整體設(shè)計(jì)，并與大家探討了它的視覺呈現(xiàn)和用戶體驗(yàn)。

我們前期的內(nèi)部設(shè)計(jì)偏向簡潔，所以開始思考如何提升網(wǎng)站的整體設(shè)計(jì)感。這些嘗試便由此展開。

網(wǎng)站地址：https://infinilabs.com/

如果你對動態(tài)背景的實(shí)現(xiàn)感興趣，這篇文章將帶你深入探索，揭秘如何從零打造一個(gè)兼具美感與功能性的企業(yè)官網(wǎng)！

技術(shù)選型

• 前端框架：Next.js
• UI 框架：基于 Tailwind CSS
• CSS 樣式：Tailwind CSS（快速開發(fā)、內(nèi)置響應(yīng)式、豐富工具類）

為什么選擇 Next.js？

1. 兼容團(tuán)隊(duì)技術(shù)棧：基于 React，便于團(tuán)隊(duì)協(xié)作。
2. SEO 和性能優(yōu)化：支持服務(wù)端渲染（SSR）和靜態(tài)站點(diǎn)生成（SSG）。
3. 路由強(qiáng)大：支持動態(tài)路由和文件路由，靈活易用。
4. 內(nèi)置優(yōu)化：圖片優(yōu)化、國際化、多種性能提升。
5. 動態(tài)內(nèi)容支持：博客、新聞等動態(tài)場景輕松應(yīng)對。
6. 加載體驗(yàn)佳：用戶體驗(yàn)和頁面加載速度表現(xiàn)優(yōu)秀。

動態(tài)的背景方案

動態(tài)背景可以顯著提升視覺吸引力，以下是常用實(shí)現(xiàn)方案：

1. CSS 動畫背景：使用純 CSS 實(shí)現(xiàn)動態(tài)背景，通過 @keyframes 配合漸變色、位置移動等屬性。
2. 動態(tài) Canvas 背景：使用 <canvas> 元素，結(jié)合 JavaScript 繪制動態(tài)效果，比如粒子系統(tǒng)、波浪效果等。
3. 動態(tài)視頻背景：使用 <video> 元素播放循環(huán)視頻作為背景。
4. WebGL 動態(tài)背景：使用 WebGL 庫（如 Three.js）渲染 3D 動態(tài)背景。
5. 動態(tài)粒子背景：使用現(xiàn)有的粒子背景庫快速實(shí)現(xiàn)動態(tài)粒子效果。（particles.js 或 tsparticles）
6. …

如何選擇？

1. 簡單需求： 純 CSS 動畫、動態(tài)視頻背景。
2. 復(fù)雜交互：Canvas 動畫、WebGL 動畫（Three.js）。
3. 快速實(shí)現(xiàn)：使用粒子背景庫（particles.js / tsparticles）。

動態(tài)背景代碼實(shí)現(xiàn)

以下示例通過 WebGL 創(chuàng)建了一個(gè)動態(tài)背景組件，支持 React 和 Tailwind CSS。

1. 創(chuàng)建 GlobalBackground.tsx 文件：

"use client";import dynamic from "next/dynamic";
import { Suspense, useEffect, useState } from "react";
import { Layout } from "./Layout";const ShaderGradient = dynamic(() => import("shadergradient").then((mod) => mod.ShaderGradient),{ ssr: false }
);
const View = dynamic(() => import("./View").then((mod) => mod.View), {ssr: false,loading: () => (<divclassName="w-full h-full bg-cover bg-center"style={{ backgroundImage: "url(/images/loading-bg.png)" }}></div>),
});export default function GlobalBackground() {const defaultProps: any = {control: "props",animate: "on",brightness: 1.2,cDistance: 3.6,cameraZoom: 1,color1: "#0600B8",color2: "#9000E3",color3: "#0B004F",// embedMode: "off",envPreset: "city",// gizmoHelper: "hide",grain: "off",lightType: "3d",reflection: 0.1,shader: "defaults",type: "waterPlane",uSpeed: 0.2,uTime: 0,wireframe: false,zoomOut: false,toggleAxis: false,};const [suspenseWebgl, setSuspenseWebgl] = useState(false);useEffect(() => {const canvas = document.createElement("canvas");const gl =canvas.getContext("webgl") || canvas.getContext("experimental-webgl");if (gl) {// 瀏覽器支持 WebGLconsole.log("The browser does support WebGL");setSuspenseWebgl(true);} else {console.log("The browser does not support WebGL");// 瀏覽器不支持 WebGL}}, []);return (<>{suspenseWebgl ? (<Layout><View className="w-full h-full"><Suspense fallback={null}><ShaderGradient {...defaultProps} /></Suspense></View></Layout>) : null}</>);
}

2. 創(chuàng)建 Layout.tsx 文件：

"use client";import { useRef } from "react";
import dynamic from "next/dynamic";
const Scene = dynamic(() => import("./Scene"), { ssr: false });const Layout = ({ children }: any) => {const ref = useRef<any>();return (<divref={ref}className="fade-in"style={{position: "fixed",top: 0,left: 0,width: "100%",height: "100%",zIndex: -1,overflow: "auto",touchAction: "auto",}}>{children}<Scenestyle={{position: "fixed",top: 0,left: 0,width: "100%",height: "100%",pointerEvents: "none",}}eventSource={ref}eventPrefix="client"pixelDensity={1}pointerEvents="none"/></div>);
};export { Layout };

3. 創(chuàng)建 Scene.tsx 文件：

"use client";import { ShaderGradientCanvas } from "shadergradient";
import { Canvas } from "@react-three/fiber";
import { Preload } from "@react-three/drei";
import tunnel from "tunnel-rat";const r3f = tunnel();export default function Scene({ ...props }) {// Everything defined in here will persist between route changes, only children are swappedreturn (<ShaderGradientCanvas {...props}>{/* @ts-ignore */}<r3f.Out /><Preload all /></ShaderGradientCanvas>);
}

4. 創(chuàng)建 View.tsx 文件：

"use client";import { forwardRef, Suspense, useImperativeHandle, useRef } from "react";
import {OrbitControls,PerspectiveCamera,View as ViewImpl,
} from "@react-three/drei";
import tunnel from "tunnel-rat";const r3f = tunnel();const Three = ({ children }: any) => {return <r3f.In>{children}</r3f.In>;
};export const Common = ({ color }: any) => (<Suspense fallback={null}>{color && <color attach="background" args={[color]} />}<ambientLight intensity={0.5} /><pointLight position={[20, 30, 10]} intensity={1} /><pointLight position={[-10, -10, -10]} color="blue" /><PerspectiveCamera makeDefault fov={40} position={[0, 0, 6]} /></Suspense>
);const View = forwardRef(({ children, orbit, ...props }: any, ref) => {const localRef = useRef<any>(null);useImperativeHandle(ref, () => localRef.current);return (<><div ref={localRef} {...props} /><Three><ViewImpl track={localRef}>{children}{orbit && <OrbitControls />}</ViewImpl></Three></>);
});
View.displayName = "View";export { View };

5. 直接在 app/page.tsx 使用背景組件：

import GlobalBackground from "@/components/GlobalBackground";export default function Home() {return (<><GlobalBackground></GlobalBackground><divclassName="min-h-screen bg-cover bg-center"style={{ backgroundImage: "url(/svg/bg_n.svg)" }}>....</div></>);
}

6. 當(dāng)然，代碼弄好了，要想讓代碼運(yùn)行起來，還需要安裝一下依賴：

pnpm add @react-three/drei @react-three/fiber shadergradient tunnel-rat

通過這些步驟，你將能夠?yàn)榫W(wǎng)站實(shí)現(xiàn)高性能、響應(yīng)式的動態(tài)背景效果。根據(jù)具體需求調(diào)整背景類型和交互復(fù)雜度，讓你的官網(wǎng)更具吸引力！

效果

具體效果，可以直接在網(wǎng)站上瀏覽，效果更真實(shí)。網(wǎng)站地址：https://infinilabs.com/

分享

如果你也想配置自己的動態(tài)效果圖，可以前往 shadergradient.co 網(wǎng)站進(jìn)行自定義設(shè)置。完成后，將生成的配置參數(shù)復(fù)制到 GlobalBackground.tsx 文件的 defaultProps 中，即可實(shí)現(xiàn)屬于你自己的動態(tài)背景效果。

參考

• https://github.com/ruucm/shadergradient
• https://www.shadergradient.co/
• https://infinilabs.com/

福利

INFINI Labs 一直致力于為開發(fā)者和企業(yè)提供優(yōu)質(zhì)的開源工具，提升整個(gè)技術(shù)生態(tài)的活力。除了維護(hù)國內(nèi)最流行的分詞器 analysis-ik 和 analysis-pinyin，也在不斷推動更多高質(zhì)量開源產(chǎn)品的誕生。

最近新開源的產(chǎn)品和工具：

• INFINI Framework https://github.com/infinilabs/framework
• INFINI Gateway https://github.com/infinilabs/gateway
• INFINI Console https://github.com/infinilabs/console
• INFINI Agent https://github.com/infinilabs/agent
• INFINI Loadgen https://github.com/infinilabs/loadgen
• INFINI Coco AI https://github.com/infinilabs/coco-app

以上開源軟件都可以在 Github 上面找到： https://github.com/infinilabs

希望大家都能給個(gè)免費(fèi)的 Star🌟 支持一下！！！

作者：Rain9，極限科技（INFINI Labs） 高級前端開發(fā)工程師。