带有视差滚动动效的 3D 网页

课程目标

这次课程我们会实现一个 3D 视差效果.通过这个项目，您可以更加深入掌握滚动事件、CSS 动画相关属性.

阅读

首先 访问网站 (opens new window)，感受一下什么是视差滚动效果 feedmusic (opens new window)

• 视差滚动的爱情故事 | AlloyTeam (opens new window)
• 纯 CSS 视差教程 (opens new window)
• background-attachment - CSS | MDN (opens new window)
• 简单的视差滚动 (opens new window)
• 练习视差滚动例子 (opens new window)
• 视差滚动(Parallax Scrolling)效果的原理和实现 (opens new window)
• 视频教程：HTML、CSS 和 JavaScript 中的视差效果 (opens new window)
• Parallax Scrolling: The Parallax Effect & How to Get Started | Framer (opens new window)
• How To Create a Parallax Scrolling Effect with Pure CSS in Chrome (opens new window)
• 原生 js 实现视差滚动效果（类似 D3 官网的效果），兼容 IE (opens new window)
• Make a parallax effect with 10 lines of JavaScript (opens new window)
• Amazing Parallax Effect in Pure JS (opens new window)

编码

参考示例 Demo (opens new window) 运用 HTML+CSS+Javascript 完成一个视差滚动效果

需求说明

• 视差效果可以体现出页面元素的不同深度，当用户向下滚动页面时能够看到视差效果，产生一种 3D 效果
• 图片层分为三层，分别为底层图片 (bottom.webp) ,中间层图片 (middle.webp) ,上层图片 (top.webp) ，标题层位于底层图片之上，中间层图片之下.
• 用户向下滚动，图片层逐渐覆盖标题层,并且通过滚动事件分别控制三层图片的滚动速度，底层速度最快，中间层其次，底层图片最慢。
• 图片层材料提取：parallaxEffectImg.zip (opens new window)

要求

• 代码风格优雅，代码结构合理，技术设计恰到好处；
• 框架使用方面，建议不使用框架实现一遍，然后再使用框架实现一遍；
• 除了附件中提供的图片资源，其他样式均使用 CSS 实现；文本可以自行添加，如果有额外自己添加的需求场景，可以自行按需求增加图片资源；

进阶任务

还记得之前完成的个人简历吗？请你运用视差效果美化你的简历，比如：可以在页面首页做一个随着鼠标移动的 3D 个人信息卡片，感兴趣的同学可以尽情发挥您的创造力，制作一个独一无二的简历

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。