WEB前端教程：带有视差滚动动效的 3D 网页
这次课程我们会实现一个 3D 视差效果.通过这个项目，您可以更加深入掌握滚动事件、CSS 动画相关属性
课程目标
这次课程我们会实现一个 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 后进行提交。
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-11-03 09:41
- 阅读 ( 786 )
- 分类：WEB前端开发
