当前位置: 首页 > news >正文

如何实现一个充满科技感的官网(二)

背景

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

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

网站地址: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)

如何选择?

  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: () => (<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}</>);
}
  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 (<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 };
  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 swappedreturn (<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><divclassName="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-ikanalysis-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) 高级前端开发工程师。

相关文章:

如何实现一个充满科技感的官网(二)

背景 在上一篇文章 《如何实现一个充满科技感的官网&#xff08;一&#xff09;》 中&#xff0c;我们初步了解了该官网的整体设计&#xff0c;并与大家探讨了它的视觉呈现和用户体验。 我们前期的内部设计偏向简洁&#xff0c;所以开始思考如何提升网站的整体设计感。这些尝…...

GNU链接器简介

GNU链接器简介 1 使用简单程序简介链接脚本1.1 测试程序1.2 编译测试程序1.2.1 不使用链接器编译1.2.1.1 不使用链接器编译1.2.1.2 读取objdump_test 的结构 1.2.2 使用链接器去链接1.2.2.1 链接脚本1.2.2.2 使用链接脚本编译1.2.2.3 读取objdump 的结构 2 链接脚本2.1 基本连接…...

欧几里得算法(简单理解版,非严格证明)

欧几里得算法用于求解两个整数的最大公约数&#xff0c;又称为辗转相除 依据的基本定理&#xff1a; GCD(a,b)GCD(a%b,b) 证明&#xff1a; 对于搞理论的人可能需要会严格证明&#xff0c;但是对于我们一般人而言&#xff0c;只要能理解其原理并记住即可&#xff0c;后者实际上…...

Mac软件介绍之录屏软件Filmage Screen

软件介绍 Filmage Screen 是一款专业的视频录制和编辑软件&#xff0c;适用于 Mac 系统 可以选择4k 60fps&#xff0c;可以选择录制电脑屏幕&#xff0c;摄像头录制&#xff0c;可以选择区域录制。同时也支持&#xff0c;简单的视频剪辑。 可以同时录制电脑麦克风声音 标准…...

Ubuntu cuda-cudnn中断安装如何卸载

文章目录 问题描述解决方法使用强制移除 问题描述 Ubuntu22.04系统&#xff0c;在终端中执行apt insatll安装或dpkg .deb安装时如果强制关闭终端会导致安装失败&#xff08;安装包会变成iu状态或ru状态&#xff0c;安装成功的应该是ii状态&#xff09; 此时&#xff0c;无论是…...

CSS——7.CSS注释

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>css注释</title><link rel"stylesheet" type"text/css" href"a.css"/></head><body><!--头部开始&#xff08;h…...

鸿蒙APP之从开发到发布的一点心得

引言&#xff1a; 做鸿蒙开发大概有1年左右时间了&#xff0c;从最开始的看官方文档、看B站视频&#xff0c;到后来成功发布两款个人APP&#xff08;房贷计算极简版、时简时钟 轻喷&#xff0c;谢谢&#xff09;。简单描述一下里边遇到的坑以及一些经历吧。 学习鸿蒙开发 个…...

某小程序sign签名参数逆向分析

文章目录 1. 写在前面2. 接口分析3. 分析还原 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Python…...

智能风控/数据分析 聚合 分组 连接

data。head&#xff08;&#xff09;查看前几行 data.head() 是一个在Python的Pandas库中常用的方法&#xff0c;用于查看DataFrame对象的前几行数据。默认情况下&#xff0c;head() 方法会返回DataFrame的前5行数据&#xff0c;但是你也可以通过传递一个整数参数来指定返回的…...

Unity3D PBR光照计算公式推导详解

前言 在Unity3D中&#xff0c;PBR&#xff08;Physically Based Rendering&#xff0c;基于物理的渲染&#xff09;光照模型是一种高级光照模型&#xff0c;它模拟了真实世界中光的传播和反射过程&#xff0c;从而提供了更加逼真的渲染效果。PBR光照模型的计算公式涉及多个物理…...

行为树详解(6)——黑板模式

【动作节点数据共享】 行为树中需要的参数可以来自游戏中的各个模块&#xff0c;如果仅需从多个模块获取少量参数&#xff0c;那么可以直接在代码中调用其他模块的单例继而层层调用获取数据。 如果获取的参数量很大&#xff0c;从架构上看&#xff0c;我们需要通过加一个中间…...

Vue.js与其他框架有哪些兼容性?

Vue.js的兼容性主要体现在几个方面&#xff0c;包括浏览器支持、运行环境适应性、与其他库和框架的集成能力等。以下是更详细的解释&#xff1a; 浏览器兼容性 现代浏览器&#xff1a;Vue.js广泛支持所有主流的现代浏览器&#xff0c;如Google Chrome, Firefox, Safari, Edge…...

Java 8 Stream 介绍

Java 8 Stream 介绍 1. 什么是Stream&#xff1f; Stream&#xff08;流&#xff09;是Java 8引入的全新概念&#xff0c;它是一个支持串行和并行聚合操作的元素序列。Stream API提供了一种声明式的方式来处理数据集合&#xff0c;可以让我们以一种类似SQL查询的方式处理数据…...

Java NIO、AIO分析

好的&#xff0c;下面将对Java中的**NIO&#xff08;Non-blocking IO&#xff09;和AIO&#xff08;Asynchronous IO&#xff09;**进行更深入的分析&#xff0c;重点探讨它们的特点和具体的应用场景。 一、Java NIO&#xff08;Non-blocking IO&#xff09;深入分析 1. 主要…...

pip下载包出现SSLError

报错&#xff1a; ERROR: Could not install packages due to an OSError: HTTPSConnectionPool(host‘files.pythonhosted.org’, port443): Max retries exceeded with url: /packages/8a/c2/ae7227e4b089c6a8210920db9d5ac59186b0a84eb1e6d96b9218916cdaf1/taming_transform…...

零成本的互联网创业创意有哪些?

在互联网时代&#xff0c;创业的门槛大大降低&#xff0c;即使没有大量的资金投入&#xff0c;也有许多机会可以实现创业梦想。以下将为您介绍一些零成本的互联网创业创意&#xff0c;帮助您在互联网的海洋中找到属于自己的宝藏。 一、内容创作与自媒体 &#xff08;一&#…...

linux ubantu重启桌面

在 Ubuntu 系统中&#xff0c;重启桌面环境通常有几种方法&#xff0c;具体取决于你所使用的桌面环境&#xff08;如 GNOME、KDE 等&#xff09;。下面是几种常用的重启桌面的方法&#xff1a; 重启 GNOME 桌面环境 如果你使用的是 GNOME 桌面环境&#xff08;Ubuntu 默认桌面…...

DeepSeek重新定义“Open“AI

“面对颠覆性技术&#xff0c;闭源所创造的护城河是暂时的。即使是OpenAI的闭源方法也无法阻止他人赶超。” ——梁文锋&#xff0c;DeepSeek CEO DeepSeek V3 是一个拥有6710亿参数的开源AI模型&#xff0c;正在提升AI效率的新标准。它在相对有限的预算下进行训练&#xff0c…...

iOS - 自旋锁

在 Objective-C 运行时中大量使用自旋锁&#xff0c;主要有以下几个原因&#xff1a; 1. 性能考虑 上下文切换成本 // 自旋锁实现 static ALWAYS_INLINE void OSSpinLockLock(volatile OSSpinLock *lock) {do {while (lock->value ! 0) {__asm__ volatile ("pause&q…...

web应用网站如何启用http2请求

要启用 HTTP/2 协议&#xff0c;您需要确保您的 Web 服务器软件支持 HTTP/2&#xff0c;并进行相应的配置。以下是一些常见的 Web 服务器软件及其启用 HTTP/2 的方法&#xff1a; 1. Nginx 对于 Nginx&#xff0c;您需要确保使用的是 1.9.5 或更高版本&#xff0c;因为这些版本…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

算术操作符与类型转换:从基础到精通

目录 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 算术操作符超级详解 算术操作符&#xff1a;、-、*、/、% 赋值操作符&#xff1a;和复合赋值 单⽬操作符&#xff1a;、--、、- 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 在先前的文…...