Haruhi's Web ~ 网站设计&开发logs

在这里记录 Haruhi Web 的开发 logs 和经验！

中间主体部分

实现中的 tips：

1. 往 html 上放元素，进行 css 的粗打磨：
   • 如果要图片宽高不会随窗口大小变化而变化（！现在先不实现响应式，既要又要只会迈不开步子），先给个 min-width / max-width 来写死宽度——高度的话，一般我是让高度跟着宽度走（ height: auto ）。

左边：滚动大字（rolling-slogan）

首先我的构想是：

动画效果：

• 两句团宣传语：向上滚动 & 向下匀速滚动，鼠标悬浮时滚动停止。

（右边的子菜单还没想好——等想好子页面构造再说。。）

其次是实现：

1. 白色的 HARUHI’s Web 蒙版：使用 absolute + 位置偏移？
2. 用 flex 来分配区域比例：
   • 1/2：大字标题 ”SOS 团“
   • 剩下 1/2：
     • 2/3：日语宣传语
       • （通过 background，做成“首尾衔接滚动”的效果？）
       • 隐藏其他部分：overflow-y：hidden
     • 1/3：英文宣传语

遇到问题：设计的页面太大，浏览器放不下。。

回溯上级容器，调整当前容器（新的子容器）的比例大小！（在 100vw 基础上乘以新比例！）

——我知道顺着想容易、逆着想很难，这意味着有时候要把做的东西全部掀掉再来。我们练熟的目的只有一个：尽量模块化，减少“重来后”的工作量（这种时候宽高写死，那就是真死定了；但也不能全写比例：浏览器窗口大小一变，页面效果就全没了（指元素乱跑））

如何让 flex 宽度贴合子元素？

inline-flex：真的吗？——不行。

为了了解 为何会产生这种 ”空隙“，我去阅读 mdn 文档。

• 可用空间（available space） ……最后我是 缩小父容器、拓宽子元素 来硬填满多出来的空间（需要细调 flex 分配的比例，响应式八成要重做喽（摊手））

如何 ”保持字体“ 从 AI 中导出文字？

要先 转换为轮廓 ，再将对应项依次导出。

---

目前第一步效果大概这样！接下来用 css动画 实现 ”滚动文字“！

（其实我还忘了一个：网站入场动画！草，明天再说吧（还要一边想怎么设计网页））

无缝滚动

• 复制 2 份元素，通过 flex 排列，以形成头尾衔接。

为了快速出动画效果，先暂时 f12 获得图片高度然后直接在 animation 中写死位移高度了。未来大概率会使用 js 动态获取高度。

好了！第一步构想差不多就做到这里 ~ 接下来要做什么效果出来？？

——下一步：根据 OP/ ED 找灵感，做出子页面。

参考大合集：【4K】凉宫春日系列动画全NCOP/ED 4K高清修复合集（附God Knows…）】

OP / ED 风格、元素分析：

• 日常场景 + 二次元人物 图层蒙版
• 高饱和漫画风（夸张特效、波点阴影）
• 日式高中常见元素：
  • 英语单词、理科（数物化）公式
  • 教室窗户、楼梯拐角……

多余的 ideas：

• 人物介绍 “由 5 个 flex 元素组成；当鼠标悬浮于某人图像上时，其他人变暗、本人亮起 & 显示人名（人名初始不显示）——模拟 “聚光灯照耀、主角登场” 的效果！）
  ——不过这样单独作为一个页面太空，我在想如何处理。。

  

• 在首页加上 红色的 SOS 团网站标语 悬浮弹窗，增加年代风味？

• 可以用 “横闪过去” 的动效显示团长立绘 & 团徽（参考 yj 的效果？这个有些难，可能得靠 video 后期处理了）

• 首页背景可贴纹理，增加视觉噪点（在贴之前，先用 ai 设计看看效果！）

• 滚动标语鼠标悬浮会停下、点击（可附上鼠标点击特效提示！）会让标语变成随机团员色！——但要改变颜色的话， svg 就不能用 img标签 暴力引入了。）

• 可以卡帧 抠下 OP 中的奔跑团长 作为 loading 或网页中动画的素材！

（通常看 50 个画面才能产生一个可能有用的灵感废料。。慢慢看慢慢想！）

• 一点小东西：在纯 html + CSS 中实现 ”组件化管理“
  • html 中标记注释

          <div class="right">
            <!-- home_nav.html-开始 -->
            ...
            <!-- home_nav.html-结束 -->
          </div>
  

  • CSS 文件单独管理（组件化后直接复制到 style scoped 中）

——明天来整理文档（可以早上写要点、晚上来完善细节）：整理一下今晚搞的小 nav的设计 & 实现效果（抠图抠了一天！经验也可以记记），然后晚上开始搞 SOS 团徽的旋转 & 显示细节啥的（包括透明度、位移什么的）。。。（css 动画启动！）

（话说抠的立绘还没扔到网页上。。任重道远！）

（顺便要做 loading 了——网页显示不能秒出了）

我想的是用 vue3 重构了项目，顺便开始准备准备 loading 动画：

• 抠图准备：春日奔跑的剪影
• 了解 loading 动画怎么做……
  • 先自己思考一下：
    1. 有一个 “boolean 变量” 来表示 “是否处于 loading 状态”。
    2. 异步函数持续 “监测页面是否加载完毕” ——如果加载完，将变量赋值 false，解除 loading 状态。

【持续更新中……】