如何在纯 CSS 中创建视差滚动效果


如何在纯 CSS 中创建视差滚动效果

如何在纯 CSS 中创建视差滚动效果

Parallax scrolling (source: wikipedia.org)

您是否见过具有漂亮视差滚动效果的网站。这就是我们今天要创造的。

视差滚动是网站的不同部分以不同速度滚动的效果。大多数人尝试利用 javascript 库来实现这一点。但在这里,我们将提供一个纯粹基于 css 的解决方案,您可以在 10 秒内将其添加到现有代码库中。

简单地说,在页面中进行视差滚动 .parent 。孩子 元素只需键入

 .父{  
 透视:10px;  
 }  
 。孩子 {  
 变换:translateZ(-10px)缩放(1.5);  
 }

请注意, translateZ() 中的负值会最小化图像。为了克服这个问题,它被缩放了 1.5 倍。您可能需要根据需要调整此参数。

因此,如果您想了解更多信息,请打开计算机并开始输入以下代码

  • 创建 父母 元素是首要任务

  • 在其中我们需要有两个 div。第一个将包含用于视差滚动的文本和图像。下一个将隐藏图像的底层。第二个是完全可选的。建议在他们周围玩耍以更好地理解这个概念

  • 将内容添加到第一个和第二个 div

    如何在纯 CSS 中创建视差滚动效果

    Lorem Ipsum

    使此文本更大一点以获得更好的结果

  • 终于到了处理一些 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

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/288549.html

(0)
上一篇 2022年9月10日
下一篇 2022年9月10日

相关推荐

发表回复

登录后才能评论