React + GSAP + ScrollTrigger + Vite ==> 炫酷3D动画网页 -- 下篇

该项目由React + vite 搭建基于GSAP和ScrollTrigger实现炫酷3D动画网页

动画效果可以看gif图或者查看线上地址或仓库

本期接着上篇继续完善这个炫酷3D动画网页

上篇文章我们已经能把项目跑起来啦, 但是都是硬代码不具备什么扩展性这篇文章我们将再次优化代码

这篇文章主要讲解以下部分

重组代码结构
图与文字排版效果
部署github page上线

重组代码结构

上篇文章我们提到每个section结构都是高度耦合的并且还会设置不同的css属性所以必须做一些抽取封装

思考

section会包含不同的sectionClassName属性, 文字属性h3ClassName 动画类型animationType以及不同文字为了更好的封装文字就用插槽children

一般工程中会写一个配置文件，就叫gridAnimationConfig，包含每个section的必要的属性,其中因为children是React.JSX.Element 所以是jsx文件

jsx 复制代码

// const.jsx
const gridAnimationConfig = [
  {
    animationType: 'grid--1',
    sectionClassName: '',
    h3ClassName: 'content__title--right content__title--top',
    children: (
            <>
                    {'Fleeting moments,'} <br />
                    {`existence's dance.`}
            </>
    ),
    },
    {
    animationType: 'grid--2',
    sectionClassName: '',
    h3ClassName: '',
    children: (
            <>
                    {'Impermanence'} <br />
                    {`guides life's river.`}
            </>
    ),
  }
    .....
]
export default gridAnimationConfig

图与文字排版效果

配置h3ClassName 其中content__title--(top bottom left right)都是content-title附加类作用就是见名知意啦

css 复制代码

.content__title {
    position: absolute;
    height: 100vh;
    width: 100vw;
    top: 50%;
    left: 50%;
    margin: -50vh 0 0 -50vw;
    padding: 0 10vw;
    display: grid;
    place-items: center;
    text-align: center;
    font-weight: 300;
    font-size: clamp(1.5rem, 15vw, 6.5rem);
	}
.content__title--top {
    align-items: start;
}
.content__title--bottom {
    align-items: end;
}
.content__title--left {
    justify-items: start;
    text-align: left;
}
.content__title--right {
    justify-items: end;
    text-align: right;
}

最后调试一下效果看符合预期不

可以看到确实是在content的右上方没问题！

重组 gridAnimation.jsx --完结 🎉🎉🎉

将 images 变量包含在 useLayoutEffect 的依赖数组中可以确保在 images 图片加载完成后重新执行 useLayoutEffect 中的逻辑确保在执行动画之前图片已经加载
待检测每个gridchooseAnimation之后再关掉loading遮罩层就可以显示最终效果啦

jsx 复制代码

import { useLayoutEffect, useState } from 'react'
import { initSmoothScrolling, useImagePreloader, supportsCssVars, chooseAnimation } from './utils'
import gridAnimationConfig from './const'
import './style/index.less'
function GridAnimation() {
	const [loading, setLoading] = useState(true)
	const images = useImagePreloader()
	useLayoutEffect(() => {
		supportsCssVars() || alert('请在支持CSS变量的现代浏览器中查看此演示')
		initSmoothScrolling()
		const grids = document.querySelectorAll('.grid')
		Array.from(grids).map((grid, i) => chooseAnimation(`grid--${i + 1}`, grid))
		setLoading(false)
	}, [images])
	if (loading || !images.length) return <div className="loading"></div>
	return (
        <div>
                <main>
                        <div className="intro">
                                <h1 className="intro__title">
                                        <span className="intro__title-pre">On-Scroll</span>
                                        <span className="intro__title-sub">Perspective Grid Animations</span>
                                </h1>
                                <span className="intro__info">Scroll moderately to fully experience the animations</span>
                        </div>

                        {gridAnimationConfig.map(({ sectionClassName, h3ClassName, children }, index) => (
                                <section key={index} className={'content ' + sectionClassName}>
                                        <div className={'grid'}>
                                                <div className="grid-wrap">
                                                        {images.map((item, index) => (
                                                                <div className="grid__item" key={index}>
                                                                        <img className="grid__item-inner" src={item.src} />
                                                                </div>
                                                        ))}
                                                </div>
                                        </div>
                                        <h3 className={'content__title ' + h3ClassName}>{children}</h3>
                                </section>
                        ))}
                </main>
        </div>
	)
}
export default GridAnimation

项目部署到github page

安装依赖

因为我们使用vite搭建 gh-pages是一种静态网站托管服务直接从仓库中中获取HTML、CSS和JavaScript文件，可以选择在构建过程中运行这些文件并发布github page

zsh 复制代码

npm i -D gh-pages

package.json文件添加配置

homepage 也就是上线部署的url 格式就是https://${youName}.github.io/{gihubPageName}
"predeploy": "npm run build" 预先部署命令就是在部署之前先运行项目的构建（build）命令也就是vite原有的script 'build' : 'vite build'进行项目打包
"deploy": "gh-pages -d dist" 将位于 "dist" 目录中的文件部署到 GitHub Pages