⚡ 我重建哈利波特主题网站的经历（Version 2.0）

Source: Dev.to

背景

当我构建第一个哈利·波特主题网站的版本时，我以为自己创造了些什么特别的东西。离开一段时间后再次查看，我意识到这个想法很有魔力，但实现可以做得更好。于是我决定从头重建，推出了 Version 2.0——更简洁、更快速、更沉浸，也比以往更具魔法感。

变化概览

Version 1 亮点

• 火把灯光鼠标效果
• 魔杖式光标
• 雨天与闪电动画
• 角色悬停过渡
• 魔法氛围设计

Version 2 改进

• 完全重新设计的登陆页，动画更流畅
• 受霍格沃茨氛围启发的新布局
• 精细化的魔杖光标交互
• 更佳的闪电、气氛和背景效果
• 更清晰、易于理解的代码结构
• 改进的角色模块
• 为“魔法”外观优化的排版与配色

所有内容都使用更好的逻辑和更简洁的代码重建——没有臃肿的代码，也没有偷工减料。

使用的技术

<!-- HTML markup -->

/* CSS styling */

// JavaScript for interactivity

• AOS (Animate on Scroll) 用于滚动触发的动画
• 自定义光标动画
• 自定义倾斜与层叠的 UI 区块
• 基于悬停的 3D 风格交互
• 优化的图片处理
• 没有使用重量级框架——纯前端创意实现

收获的教训

• 怀旧情感在设计中非常强大
• 细节决定体验
• 干净的代码提升信心
• UI 本身就是讲故事的方式
• 网页开发是一门艺术

演示

我录制了 Version 2.0 的演示视频。你可以看到完整的氛围、过渡、各个模块以及相较于 v1 的改进。

Demo video on YouTube

源代码

如果你想深入了解 Version 2.0 的完整源码，可以在这里购买：

Buy the full Version 2 source code

你的支持帮助我继续创作更多有趣的项目。

感谢阅读——欢迎体验 Version 2.0 ⚡