gpt4 book ai didi

javascript - 滚动时的图像叠加(javascript)

转载 作者:行者123 更新时间:2023-11-29 16:01:42 24 4
gpt4 key购买 nike

  1. 我想在页面滚动时使用图像覆盖,如 here (看看滚动时雨滴和鱼是如何出现的,一个人是如何消失的)。
  2. tried仅使用 CSS 使其具有视差效果,但这不是我所需要的,因为它不能像上面的示例那样在移动设备上运行。如果您向我推荐一些使用“onscroll”或其他东西的 javascript hack,我将不胜感激。

我的代码

HTML

<body>
<div class="parallax">
<div class="bg_one"></div>
<div class="bg_two"></div>
</div>
</body>

CSS

.parallax [class*="bg_"] {
position: relative;
height: 900px;
background-attachment: fixed;
background-position: center;
background-size: cover;
}

.parallax .bg_one {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20пни.png);
}
.parallax .bg_two {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20квартиры.png);
}

最佳答案

这是个好主意!

我不是在真正的手机上而是在 Chrome > 检查 > 切换设备工具栏(左上角)上测试了你的代码。这允许您在类似移动设备的环境中测试网页。我对您的 CSS 进行了一些更改,它似乎有效:

.parallax [class*="bg_"] {
position: relative;
height: 100vh;
background-attachment: fixed;
background-position: top center;
background-size: cover;
}

.parallax .bg_one {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20пни.png);
}
.parallax .bg_two {
background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20квартиры.png);
}
<div class="parallax">
<div class="bg_one"></div>
<div class="bg_two"></div>
</div>

关于javascript - 滚动时的图像叠加(javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52150482/

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