Parallax scrolling (source: wikipedia.org)
您是否见过具有漂亮视差滚动效果的网站。这就是我们今天要创造的。
视差滚动是网站的不同部分以不同速度滚动的效果。大多数人尝试利用 javascript 库来实现这一点。但在这里,我们将提供一个纯粹基于 css 的解决方案,您可以在 10 秒内将其添加到现有代码库中。
简单地说,在页面中进行视差滚动 .parent
和 。孩子
元素只需键入
.父{ 透视:10px; } 。孩子 { 变换:translateZ(-10px)缩放(1.5); }
请注意, translateZ() 中的负值会最小化图像。为了克服这个问题,它被缩放了 1.5 倍。您可能需要根据需要调整此参数。
因此,如果您想了解更多信息,请打开计算机并开始输入以下代码
创建 父母
元素是首要任务
在其中我们需要有两个 div。第一个将包含用于视差滚动的文本和图像。下一个将隐藏图像的底层。第二个是完全可选的。建议在他们周围玩耍以更好地理解这个概念
将内容添加到第一个和第二个 div
终于到了处理一些 CSS 的时间了
.父{
高度:100vh;
溢出-y:自动;
溢出-x:隐藏;
透视:10px; /* 这条线很神奇 /
} 。第一的 {
/ 这是使文本居中 /
位置:相对;
显示:弯曲;
证明内容:中心;
对齐项目:居中;
高度:100%; / 告诉浏览器 将其渲染为 3d */
变换样式:preserve-3d;
z 指数:-1;
} 。背景 {
位置:绝对;
高度:100%;
宽度:100%;
适合对象:封面;
z 指数:-1;
变换:translateZ(-10px)缩放(2);
}
其余的课程并不那么重要,由您的创造力来完成。
在一点点css之后,结果是这样的。
以这种方式完成的动画将非常流畅,并且不会像其他 javascript 库那样占用太多计算能力。
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明
本文链接:https://www.qanswer.top/23540/13541001