WEB前端教程：带有视差滚动动效的 3D 网页

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

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

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

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

需求说明

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

要求

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

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

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

0 条评论