AlbumsAdoration：个人制作音乐专辑展示项目

本文系用户投稿，不代表机核网观点

⚠️ 未经作者授权禁止转载

点击这里浏览网页
Albums Adoration 是我设计开发的一个专辑展示项目，起因是我向朋友推荐音乐专辑时，突然想到如果有那么一个网页可以展示所有我喜欢的专辑，并且还能对专辑进行实时更新那是多么美妙的事。向朋友推荐专辑时我也可以直接分享这个网页。
决定制作后，我开始了最初的页面设计，划分成两个区域，由于很喜欢封面流，所以决定上面部分用 Cover Flow 固定展示，而下面部分则是展示当前专辑的信息。得益于 Chrome 浏览器支持新 animation-timeline CSS 属性，可以配合浏览器滚动时做出舒适的动画效果。我可以按住封面区域进行滑动，如果是使用触摸板的话也可以进行横向滑动操作。

但除了 Chrome 外其他一些浏览器并不支持 animation-timeline 所以无法实现相同效果，只能做样式的降级处理。

 主要利用 animation-timeline 配合 scroll-snap-type 和 animation 去修改 transform 的 scale 和 scale 属性将其 y 轴旋转和放大。滚动时会对应到 animation 动画的百分比进度。

接下来是一些关于页面设计小细节的内容。
 背景和字体的颜色，一开始考虑通过算法取色，像是 Spotify 播放页的背景，但并没有自己选择配色的效果好，所以每个专辑都精心选取了合适的颜色进行展示。

歌曲的背景是一个动态的噪点图，我很喜欢这种效果，但不知道为何移动端上会显示有些问题，可能因为 transform 的位移过快导致的闪烁，目前还没有找出合适的方案，所以我做了判断，只在电脑浏览的时候才会开启动态噪点图背景。具体实现是以下这样的代码：

在列表中歌曲是可以点击选中的，并且有这种 highlight 涂抹的效果，我非常喜欢！甚至以后的项目也会利用上，是使用了一个名为 RoughNoation 的工具库来实现的。

当点击当前选中专辑下方的那个小白条后会出现所有专辑的列表：

这里我利用了噪点背景图加上模糊，做出了自己非常喜欢的效果，得益于浏览器支持新的 CSS 特性 backdrop-filter ，做背景模糊终于不再是一件麻烦事！我也隐藏了主页面的滚动条，并自定义了浮层的一个细小的滚动条，来更符合整体页面样式。
点击专辑名称，可以将 Cover Flow 部分的其他专辑隐藏，只显示当前选中的专辑：

在移动端中，字体样式也进行了调整：
1 / 4
之后的构想可能会再做一个数据管理的页面，在界面上进行数据操作而不是直接修改代码。
以上就是关于页面和实现上的简单描述，这里我也将我喜欢听的专辑分享给大家，如果访问后有遇到 BUG 或者什么不正常的地方麻烦评论或者私信反馈，谢谢。
转载自花束渲染