gpt4 book ai didi

html - CSS 过渡的视差效果

转载 作者:搜寻专家 更新时间:2023-10-31 22:41:37 24 4
gpt4 key购买 nike

是否可以使用 css 过渡制作背景图像的视差效果?视差应该比滚动慢,所以需要做一些减慢的事情——可以用 css 来做吗?或者,如果没有,如何最好地使用 js/jquery 来完成?

我关心最佳性能脚本,因为我的网页很少重载。

有人可以告诉或展示怎么做吗?我将不胜感激。

最佳答案

CSS 有一个 perspective 属性,您可以将其与 zoom 结合使用,以实现元素“位于”其他元素“后面”或“位于”前面,从而以不同的速度滚动.

关于这方面的资源很多,@dwreck08 提供的资源是最好的之一:http://keithclark.co.uk/articles/pure-css-parallax-websites/

这是一个快速复制:

.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 1px;
perspective: 1px;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--base {
transform: translateZ(0);
color: white;
background: url(http://cliparts.co/cliparts/pT5/A7L/pT5A7L8T9.png) center no-repeat;
background-size: 50% auto;
}
.parallax__layer--back {
transform: translateZ(-1px) scale(2);
background: url(http://www.hdiphone6wallpapers.net/iphone-6-backgrounds/iphone-6-wallpapers-2/iphone-6-wallpapers-hd-100pb94q-1080x1920.jpg) no-repeat;
}
.parallax__layer--slow {
transform: translateZ(-4px) scale(4);
background: url(http://1.bp.blogspot.com/-ZRDN2sugdrg/UXa1qeFfjYI/AAAAAAAAVjo/1m10L-jCIgo/s1600/starcraft_2_render7E0.png) no-repeat center;
background-size: 100%;
}

* {
margin: 0;
padding: 0;
}

.parallax {
font-size: 16px;
}

.parallax__layer {
padding: 75vh 0;
}
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
</div>
<div class="parallax__layer parallax__layer--slow">
</div>
<div class="parallax__layer parallax__layer--base">
</div>
</div>

要控制每层的滚动速度,请更改 translateZscale 属性。

关于html - CSS 过渡的视差效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33964391/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com