使用动态背景轻松增强您的网站设计！（2）

# Web 开发 # React # nextjs

背景

在上一篇《如何实现一个高科技的官网（一）》中我们探索了网站的整体设计，并讨论了网站视觉呈现和用户体验。

我们最初的内部设计倾向于简约，因此我们开始探索增强整体设计美感的方法。这一探索促成了以下实施。

网站网址：https://infinilabs.com/

如果您有兴趣创建动态背景，本文将指导您从头开始构建具有视觉吸引力且功能齐全的企业网站！

技术堆栈

前端框架：Next.js

UI 框架：基于 Tailwind CSS

CSS 样式：Tailwind CSS（快速开发、内置响应能力、丰富的实用程序类）

为什么选择 Next.js？

与团队技术栈兼容：基于 React 构建，实现无缝协作。

SEO 和性能优化：支持服务器端渲染（SSR）和静态站点生成（SSG）。

强大的路由：支持动态路由和基于文件的路由，灵活、易用。

内置优化：图像优化、国际化和各种性能增强。

动态内容支持：适合博客和新闻平台等动态场景。

出色的加载体验：提供一流的用户体验和快速的页面加载时间。

动态背景解决方案

动态背景可以显著增强视觉吸引力。以下是常见的解决方案：

CSS 动画背景：使用带有渐变颜色、位置偏移等的@keyframes 进行动画的纯 CSS。

动态画布背景：使用

动态视频背景：循环播放视频

WebGL 动态背景：使用 Three.js 等 WebGL 库实现 3D 效果。

动态粒子背景：利用像particles.js或tsparticles这样的库来实现快速的粒子效果。

......

如何选择？

简单需求：纯 CSS 动画或动态视频背景。

复杂的交互：Canvas 动画或 WebGL 效果（Three.js）。

快速实施：使用粒子库，如particles.js或tsparticles。

动态背景代码实现

下面是使用 WebGL 创建动态背景组件的示例，支持 React 和 Tailwind CSS。

1.创建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: () => (
    
    
  ),
})

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) {
        console.log('The browser does support WebGL')
        setSuspenseWebgl(true)
    } else {
      console.log('The browser does not support WebGL')
    }
  }, []);
  return (<>
      {suspenseWebgl ? 
        
          
            
          
        
       : null}
    )
}

2.创建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()

  return (
    
      {children}
      
    
  )
}

export { Layout }

3.创建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 swapped

  return (
    
      {/* @ts-ignore */}
      
      
    
  )
}

4.创建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 {children}
}

export const Common = ({ color }: any) => (
  
    {color && }
    
    
    
    
  
)

const View = forwardRef(({ children, orbit, ...props }: any, ref) => {
  const localRef = useRef(null)
  useImperativeHandle(ref, () => localRef.current)

  return (
    <>
      
      
        
          {children}
          {orbit && }
        
      
    
  )
})
View.displayName = 'View'

export { View }

5. 在 app/page.tsx 中使用背景组件：

import GlobalBackground from "@/components/GlobalBackground";

export default function Home() {
  return (
    <>
      
      
        ....
      
    
  );
}

6.安装依赖项：

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

这些步骤可让您实现高性能、响应式的动态背景。根据您的特定需求调整背景类型和交互，让您的网站更具吸引力！

演示

如果你想要配置自己的动态效果，请访问 shadergradient.co 进行自定义，设置完成后将生成的参数复制到 `GlobalBackground.tsx` 的 `defaultProps` 中，即可制作出属于你自己的动态背景。

参考

https://github.com/ruucm/shadergradient

https://www.shadergradient.co/

https://infinilabs.com/

奖金

**INFINILabs**致力于为开发者和企业提供优质开源工具，活跃科技生态，在维护“analysis-ik”、“analysis-pinyin”等国产热门工具的同时，持续推动优质开源产品的发展。

最近开源的产品和工具：

INFINI 框架 https://github.com/infinilabs/framework

INFINI 网关 https://github.com/infinilabs/gateway

INFINI 控制台 https://github.com/infinilabs/console

INFINI 代理 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

如果您给予我们**Star🌟**的支持，我们将不胜感激！

CLIS.CC