不再是demo！把“花活”落地到网站项目中

视频展示了如何将GSAP动效、物理引擎等前端技术实际应用到医学统计系统官网项目中，并实现响应式适配。

UP主: JIEJOE_轻敲代码 · 时长: 4:11 · 🔗 B站原视频

发布: 2024-12-25 · 收录: 2024-12-26

标签: 前端开发 · GSAP · 网页动效 · 响应式设计 · UI交互

项目概览：医学统计系统官网

欢迎收看本期视频。今天我来跟大家分享一下我近期在做的一个项目：一个医学统计系统的官方网站。

首先来看菜单组件、跳转链接、语言切换按钮、关注条以及联系按钮。这个网站是可以切换多语言的，比如这里的中文。设计过程中主要以英文为参考，所以英文版可能会比中文版更好看一点。

主屏上的动效对应整个医学统计系统的三个步骤：吸收数据、转换、最后发表文献。当对应阶段完成之后，左边的标识框就会勾上。

这里产出的文章我加了物理引擎，可以直接用手拖拽，它也具有相应的物理模拟效果。整个主屏效果是用 Three.js 加上 GSAP 做的，材质部分也用到了相关方案。Three.js 和材质相关我在之前的视频里都有讲过，感兴趣的朋友可以去看一看。

接着往下滑，下面是整个医学统计系统的四个分系统，鼠标 Hover 就可以展开查看更详细的内容。目前系统的链接还没有填进去，这部分实现就是一个简单的 CSS 内容切换。

这里是系统的第一个步骤：发现问题。上方的问题框是可以点击消除的，这些问题的来源是下面这个“正在思考”的医生。

问题框是用 GSAP 做的无限上升动画，点击之后它会重新播放这个动画。

继续往下滑来到第二个步骤：数据筛选。往下滑动时，正文会固定在屏幕上，随着滚动后面的数据往下移动，标志着筛选过程。

再往下滑，被筛选的数据逐渐高亮框选，其余数据慢慢淡化，最后消失不见。被筛选出来的数据就会进入第三个步骤。

第三个步骤是统计分析：系统会对所有数据进行统计分析，内容分成四个部分。这里同样是一个滑动固定效果，左边的动画卡片会固定在屏幕上，滑动可以控制它的播放进度。

这个卡片也是用 Three.js 做的动画。关于滚动跟随/滚动控制进度的效果，我之前专门做过视频讲过，感兴趣的小伙伴可以去看一看。我之前视频里的那些效果、那些 demo，最终都会放到自己的项目里落地。

继续向下滑是团队介绍。鼠标 Hover 在某个成员上面之后，旁边的卡片会翻转，展示对应的介绍信息。

这里有一点是：翻转的信息内容卡片和右侧的小卡片始终处于同一行，不会出现跨行导致翻转错位的情况。

最后一部分是最近新闻、新闻页的跳转链接，以及整个网站的 Footer 内容。

这个网站接着做的是响应式开发，在不同尺寸下都可以适配。来看手机端演示：竖屏模式下主屏内容变成上下布局，物理引擎效果也保留了，没有因为手机端就阉割掉，因为移动端性能和适配表现还是不错的。

系统部分变成纵向排布。第一步没有明显变化。第二阶段的数据筛选，滑动跟随效果也没有阉割，因为优化完之后的滚动跟随其实比较稳定，手机端频繁的尺寸变化也可以适应。第三个步骤我主要是调整了一下布局，团队介绍也适配了竖屏比例。

以上就是整个官网首页的演示。后续的新闻以及新闻详情还没有开发完成，等这两个页面完成之后会出一个完整演示，大家请期待。

如果你喜欢这期视频，记得点赞、投币、收藏，我们下期再见，拜拜。