如何实现一个充满科技感的官网（二）

背景

在上一篇文章 《如何实现一个充满科技感的官网（一）》 中，我们初步了解了该官网的整体设计，并与大家探讨了它的视觉呈现和用户体验。

我们前期的内部设计偏向简洁，所以开始思考如何提升网站的整体设计感。这些尝试便由此展开。

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

如果你对动态背景的实现感兴趣，这篇文章将带你深入探索，揭秘如何从零打造一个兼具美感与功能性的企业官网！

技术选型

  • 前端框架：Next.js
  • UI 框架：基于 Tailwind CSS
  • CSS 样式：Tailwind CSS（快速开发、内置响应式、丰富工具类）

为什么选择 Next.js？

  1. 兼容团队技术栈：基于 React，便于团队协作。
  2. SEO 和性能优化：支持服务端渲染（SSR）和静态站点生成（SSG）。
  3. 路由强大：支持动态路由和文件路由，灵活易用。
  4. 内置优化：图片优化、国际化、多种性能提升。
  5. 动态内容支持：博客、新闻等动态场景轻松应对。
  6. 加载体验佳：用户体验和页面加载速度表现优秀。

动态的背景方案

动态背景可以显著提升视觉吸引力，以下是常用实现方案：

  1. CSS 动画背景：使用纯 CSS 实现动态背景，通过 @keyframes 配合渐变色、位置移动等属性。
  2. 动态 Canvas 背景：使用 <canvas> 元素，结合 JavaScript 绘制动态效果，比如粒子系统、波浪效果等。
  3. 动态视频背景：使用 <video> 元素播放循环视频作为背景。
  4. WebGL 动态背景：使用 WebGL 库（如 Three.js）渲染 3D 动态背景。
  5. 动态粒子背景：使用现有的粒子背景库快速实现动态粒子效果。（particles.js 或 tsparticles）
  6. …

如何选择？

  1. 简单需求： 纯 CSS 动画、动态视频背景。
  2. 复杂交互：Canvas 动画、WebGL 动画（Three.js）。
  3. 快速实现：使用粒子背景库（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: () => (
    <div
      className="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) {
      // 浏览器支持 WebGL
      console.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}
    </>
  );
}
  1. 创建 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 (
    <div
      ref={ref}
      className="fade-in"
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        zIndex: -1,
        overflow: "auto",
        touchAction: "auto",
      }}
    >
      {children}
      <Scene
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          pointerEvents: "none",
        }}
        eventSource={ref}
        eventPrefix="client"
        pixelDensity={1}
        pointerEvents="none"
      />
    </div>
  );
};

export { Layout };
  1. 创建 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 (
    <ShaderGradientCanvas {...props}>
      {/* @ts-ignore */}
      <r3f.Out />
      <Preload all />
    </ShaderGradientCanvas>
  );
}
  1. 创建 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 };
  1. 直接在 app/page.tsx 使用背景组件：
import GlobalBackground from "@/components/GlobalBackground";

export default function Home() {
  return (
    <>
      <GlobalBackground></GlobalBackground>
      <div
        className="min-h-screen bg-cover bg-center"
        style={{ backgroundImage: "url(/svg/bg_n.svg)" }}
      >
        ....
      </div>
    </>
  );
}
  1. 当然，代码弄好了，要想让代码运行起来，还需要安装一下依赖：
pnpm add @react-three/drei @react-three/fiber shadergradient tunnel-rat

通过这些步骤，你将能够为网站实现高性能、响应式的动态背景效果。根据具体需求调整背景类型和交互复杂度，让你的官网更具吸引力！

效果

具体效果，可以直接在网站上浏览，效果更真实。网站地址：https://infinilabs.com/

分享

如果你也想配置自己的动态效果图，可以前往 shadergradient.co 网站进行自定义设置。完成后，将生成的配置参数复制到 GlobalBackground.tsx 文件的 defaultProps 中，即可实现属于你自己的动态背景效果。

参考

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

福利

INFINI Labs 一直致力于为开发者和企业提供优质的开源工具，提升整个技术生态的活力。除了维护国内最流行的分词器 analysis-ik 和 analysis-pinyin，也在不断推动更多高质量开源产品的诞生。

最近新开源的产品和工具：

  • 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

希望大家都能给个免费的 Star🌟 支持一下！！！

作者：Rain9，极限科技（INFINI Labs） 高级前端开发工程师。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/949020.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

第431场周赛：最长乘积等价子数组、计算字符串的镜像分数、收集连续 K 个袋子可以获得的最多硬币数量、不重叠区间的最大得分

第431场周赛：最长乘积等价子数组、计算字符串的镜像分数、收集连续 K 个袋子可以获得的最多硬币数量、不重叠区间的最大得分

Q1、最长乘积等价子数组 1、题目描述 给你一个由 正整数 组成的数组 nums。 如果一个数组 arr 满足 prod(arr) lcm(arr) * gcd(arr)&#xff0c;则称其为 乘积等价数组 &#xff0c;其中&#xff1a; prod(arr) 表示 arr 中所有元素的乘积。gcd(arr) 表示 arr 中所有元素的…
阅读更多...
掌握RabbitMQ：全面知识点汇总与实践指南

掌握RabbitMQ：全面知识点汇总与实践指南

前言 RabbitMQ 是基于 AMQP 高级消息队列协议的消息队列技术。 特点&#xff1a;它通过发布/订阅模型&#xff0c;实现了服务间的高度解耦。因为消费者不需要确保提供者的存在。 作用&#xff1a;服务间异步通信&#xff1b;顺序消费&#xff1b;定时任务&#xff1b;请求削…
阅读更多...
国内Ubuntu环境Docker部署Stable Diffusion入坑记录

国内Ubuntu环境Docker部署Stable Diffusion入坑记录

国内Ubuntu环境Docker部署Stable Diffusion入坑记录 本文旨在记录使用dockerpython进行部署 stable-diffusion-webui 项目时遇到的一些问题&#xff0c;以及解决方案&#xff0c;原项目地址: https://github.com/AUTOMATIC1111/stable-diffusion-webui 问题一览&#xff1a; …
阅读更多...
SpringBoot3-深入理解自动配置类的原理（尚硅谷SpringBoot3-雷神）

SpringBoot3-深入理解自动配置类的原理（尚硅谷SpringBoot3-雷神）

文章目录 目录了解自动配置 一、导入对应场景的Mean依赖&#xff1a;1、引入依赖**找到自动配置类的所有配置都存放在哪里** 二、编写主程序&#xff1a;SpringBootApplication观察源码时所需要知道的几个核心注解&#xff1a;1、观察SpringBootApplication源码都做了什么 三、…
阅读更多...
【沉默的羔羊心理学】汉尼拔的“移情”游戏：操纵与理解的艺术，精神分析学视角下的角色互动

【沉默的羔羊心理学】汉尼拔的“移情”游戏：操纵与理解的艺术，精神分析学视角下的角色互动

终极解读《沉默的羔羊》&#xff1a;弗洛伊德精神分析学视角下的深层剖析 关键词 沉默的羔羊弗洛伊德精神分析学角色心理意识与潜意识性别与身份 弗洛伊德精神分析学简介 弗洛伊德的精神分析学是心理学的一个重要分支&#xff0c;主要关注人类行为背后的无意识动机和冲突。…
阅读更多...
字玩FontPlayer开发笔记3 性能优化 大量canvas渲染卡顿问题

字玩FontPlayer开发笔记3 性能优化 大量canvas渲染卡顿问题

字玩FontPlayer开发笔记3 性能优化 大量canvas渲染卡顿问题 字玩FontPlayer是笔者开源的一款字体设计工具&#xff0c;使用Vue3 ElementUI开发&#xff0c;源代码&#xff1a; github: https://github.com/HiToysMaker/fontplayer gitee: https://gitee.com/toysmaker/fontpl…
阅读更多...
javaEE-网络编程-3 UDP

javaEE-网络编程-3 UDP

目录 Socaket套接字 UDP数据报套字节编程 1.DatagrameSocket类 DatagramSocaket构造方法: DatagramSocaket常用方法&#xff1a; 2.DatagramPacket类 DatagramPacket构造方法&#xff1a; UDP回显服务器实现 UDP服务端实现&#xff1a; 创建一个Socket类对象&#xf…
阅读更多...
Linux：操作系统不朽的传说

Linux：操作系统不朽的传说

操作系统是计算机的灵魂&#xff0c;它掌控着计算机的硬件和软件资源&#xff0c;为用户和应用程序提供了一个稳定、高效、安全的运行环境。 在众多操作系统中&#xff0c;Linux 的地位举足轻重。它被广泛应用于服务器、云计算、物联网、嵌入式设备等领域。Linux 的成功离不开…
阅读更多...
模拟出一个三维表面生成表面点，计算体积，并处理边界点

模拟出一个三维表面生成表面点，计算体积，并处理边界点

python代码 生成表面点，计算体积，并处理边界点，最终模拟出一个三维表面。 步骤： 初始参数设置： initial_fixed_point：一个初始固定点的坐标。 slop_thre：坡度阈值。 v_thre：体积阈值。 slope_rad：将坡度从度转换为弧度。 step_size：步长。 lam_x, lam_y：泊松分布的…
阅读更多...
STM32拓展 低功耗案例1：睡眠模式 （register）

STM32拓展 低功耗案例1：睡眠模式 （register）

需求描述 让MCU进入睡眠模式&#xff0c;然后通过串口发送消息来唤醒MCU退出睡眠模式。观察LED在进入休眠模式后是否仍然开启。 思考 首先睡眠模式&#xff0c;唤醒的条件是中断&#xff0c;外部内部都可以&#xff0c;这里的串口接收中断时内部中断。 拓展&#xff1a;中断…
阅读更多...
vue 基础参数增加多语言配置

vue 基础参数增加多语言配置

js 对数组的增删改查 字段在数据库存储为nvarchar &#xff0c;varchar存储波斯语会乱码 数组格式&#xff1a; {"en": [{"type": "10","value": "Confirm","color": ""},{"type": "…
阅读更多...
[桌面运维]windows自动设置浅深色主题

[桌面运维]windows自动设置浅深色主题

设置自动浅色/深色主题 我看很多up主的教程过于繁琐&#xff0c;需要添加四个功能&#xff0c;并且有些还不能生效&#xff01; 大多数都是教程&#xff1a; 自动任务栏浅色 add HKCUSOFTWAREMicrosoftWindowsCurrentVersionThemesPersonalize/v SystemUsesLightTheme /t …
阅读更多...
[ubuntu-22.04]ubuntu不识别rtl8153 usb转网口

[ubuntu-22.04]ubuntu不识别rtl8153 usb转网口

问题描述 ubuntu22.04插入rtl8153 usb转网口不识别 解决方案 安装依赖包 sudo apt-get install libelf-dev build-essential linux-headers-uname -r sudo apt-get install gcc-12 下载源码 Realtek USB FE / GBE / 2.5G / 5G Ethernet Family Controller Softwarehttps:/…
阅读更多...
基于Python的考研学习系统

基于Python的考研学习系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…
阅读更多...
图漾相机基础操作

图漾相机基础操作

1.客户端概述 1.1 简介 PercipioViewer是图漾基于Percipio Camport SDK开发的一款看图软件&#xff0c;可实时预览相机输出的深度图、彩色图、IR红外图和点云图,并保存对应数据&#xff0c;还支持查看设备基础信息&#xff0c;在线修改gain、曝光等各种调节相机成像的参数功能…
阅读更多...
Yocto 项目中的包管理系统详细解析

Yocto 项目中的包管理系统详细解析

1. 包管理系统概念 包管理系统是用于管理软件包的工具和机制&#xff0c;包括创建、分发和安装软件包。Yocto 项目支持以下三种主要的包管理系统及其相关包格式&#xff1a; IPK (Itsy Package System)&#xff1a;适合轻量级嵌入式应用&#xff0c;通过 OPKG 管理。RPM (Red…
阅读更多...
RISC-V学习笔记

RISC-V学习笔记

1.RISC ISA1个基本整数指令集多个可选的扩展指令集&#xff0c;如RV32I表示支持32位整数指令集。I表示基本指令集&#xff0c;M表示整数乘法与除法指令集&#xff0c;A表示存储器原子指令集&#xff0c;F表示单精度浮点指令集&#xff0c;D表示双精度浮点指令集等&#xff0c;C…
阅读更多...
第四届计算机、人工智能与控制工程

第四届计算机、人工智能与控制工程

第四届计算机、人工智能与控制工程 The 4th International Conference on Computer, Artificial Intelligence and Control Engineering 重要信息 大会官网&#xff1a;www.ic-caice.net 大会时间&#xff1a;2025年1月10-12日 大会地点&#xff1a;中国合肥 (安徽大学磬苑…
阅读更多...
Docker安装易有云（casaos安装易有云）

Docker安装易有云（casaos安装易有云）

无法拉取易有云&DDNSTO Docker镜像&#xff1f; 官方视频 Docker方式安装易有云&#xff0c;包括并不限于Unraid/爱快/群晖等&#xff0c;只要有Docker的设备都成&#xff0c;包括一些Linux发行版等。 铁威马&#xff1a;首先在应用中心里安装Docker(TOS 4.0及更高的系统…
阅读更多...
【计算机视觉技术 - 人脸生成】2.GAN网络的构建和训练

【计算机视觉技术 - 人脸生成】2.GAN网络的构建和训练

GAN 是一种常用的优秀的图像生成模型。我们使用了支持条件生成的 cGAN。下面介绍简单 cGAN 模型的构建以及训练过程。 2.1 在 model 文件夹中新建 nets.py 文件 import torch import torch.nn as nn# 生成器类 class Generator(nn.Module):def __init__(self, nz100, nc3, n…
阅读更多...
最新文章

Copyright @ 2022~2023