滚动时的图像叠加（javascript）

Question

滚动时的图像叠加（javascript）

我想在像这里这样滚动页面时使用图像叠加（看看雨滴和鱼是如何出现的，滚动时一个人是如何消失的）。
我试图仅使用 CSS 使其具有视差效果，但这不是我所需要的，因为它不能像上面的示例那样在移动设备上工作。如果你给我一些关于 'onscroll' 或其他东西的 javascript hack，我将不胜感激。

我的代码

HTML

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

Run Code Online (Sandbox Code Playgroud)

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);
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

enx*_*eta 3

这是一个非常好的主意！

\n\n

我不是在真正的移动设备中测试了您的代码，而是在 Chrome > 检查 > 切换设备工具栏（左上）上测试了您的代码。这使您可以在类似移动环境的环境中测试网页。我对你的 css 做了一些更改，它似乎有效：

\n\n

\r\n

.parallax [class*="bg_"] {\r\n position: relative;\r\n height: 100vh;\r\n background-attachment: fixed;\r\n background-position: top center;\r\n background-size: cover;\r\n}\r\n\r\n.parallax .bg_one {\r\n background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/\xd0\xb2\xd0\xbd\xd1\x83\xd1\x82\xd1\x80\xd0\xb8%20\xd0\xbf\xd0\xbd\xd0\xb8.png);\r\n}\r\n.parallax .bg_two {\r\n background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/\xd0\xb2\xd0\xbd\xd1\x83\xd1\x82\xd1\x80\xd0\xb8%20\xd0\xba\xd0\xb2\xd0\xb0\xd1\x80\xd1\x82\xd0\xb8\xd1\x80\xd1\x8b.png);\r\n}

Run Code Online (Sandbox Code Playgroud)\r\n

<div class="parallax">\r\n    <div class="bg_one"></div>\r\n    <div class="bg_two"></div>\r\n</div>

Run Code Online (Sandbox Code Playgroud)\r\n

\r\n

\n

归档时间：	7 年，1 月前
查看次数：	709 次
最近记录：	5 年，9 月前