網(wǎng)站頁面尺寸百度建一個(gè)網(wǎng)站多少錢
背景
在上一篇文章 《如何實(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?
- 兼容團(tuán)隊(duì)技術(shù)棧:基于 React,便于團(tuán)隊(duì)協(xié)作。
- SEO 和性能優(yōu)化:支持服務(wù)端渲染(SSR)和靜態(tài)站點(diǎn)生成(SSG)。
- 路由強(qiáng)大:支持動態(tài)路由和文件路由,靈活易用。
- 內(nèi)置優(yōu)化:圖片優(yōu)化、國際化、多種性能提升。
- 動態(tài)內(nèi)容支持:博客、新聞等動態(tài)場景輕松應(yīng)對。
- 加載體驗(yàn)佳:用戶體驗(yàn)和頁面加載速度表現(xiàn)優(yōu)秀。
動態(tài)的背景方案
動態(tài)背景可以顯著提升視覺吸引力,以下是常用實(shí)現(xiàn)方案:
- CSS 動畫背景:使用純 CSS 實(shí)現(xiàn)動態(tài)背景,通過
@keyframes
配合漸變色、位置移動等屬性。 - 動態(tài) Canvas 背景:使用
<canvas>
元素,結(jié)合 JavaScript 繪制動態(tài)效果,比如粒子系統(tǒng)、波浪效果等。 - 動態(tài)視頻背景:使用
<video>
元素播放循環(huán)視頻作為背景。 - WebGL 動態(tài)背景:使用 WebGL 庫(如 Three.js)渲染 3D 動態(tài)背景。
- 動態(tài)粒子背景:使用現(xiàn)有的粒子背景庫快速實(shí)現(xiàn)動態(tài)粒子效果。(particles.js 或 tsparticles)
- …
如何選擇?
- 簡單需求: 純 CSS 動畫、動態(tài)視頻背景。
- 復(fù)雜交互:Canvas 動畫、WebGL 動畫(Three.js)。
- 快速實(shí)現(xiàn):使用粒子背景庫(particles.js / tsparticles)。
動態(tài)背景代碼實(shí)現(xiàn)
以下示例通過 WebGL 創(chuàng)建了一個(gè)動態(tài)背景組件,支持 React 和 Tailwind CSS。
- 創(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}</>);
}
- 創(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 };
- 創(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>);
}
- 創(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 };
- 直接在
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></>);
}
- 當(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ā)工程師。