Question

当我像here一样滚动页面时，我想使用图像叠加（请参见滚动时雨滴和鱼的出现以及一个人的消失）。
我tried仅使用CSS使之具有视差效果，但这不是我所需要的，因为它不适用于上述示例中的移动设备。如果您建议我使用“ onscroll”或其他方法进行一些JavaScript黑客攻击，我们将不胜感激。

我的代码

HTML

public static class Taskbar
{
    [DllImport("user32.dll")]
    private static extern int ShowWindow(int hwnd, int command);
    [DllImport("user32.dll")]
    private static extern int FindWindowEx(int parent, int afterWindow, string className, string windowText);

    private const int _SW_HIDE = 0;
    private const int _SW_SHOW = 1;

    /// <summary>
    /// Show all taskbars
    /// </summary>
    public static void ShowAll()
    {
        int result = 0;
        do
        {
            result = FindWindowEx(0, result, "Shell_TrayWnd", null);
            ShowWindow(result, _SW_SHOW);
        }
        while (result != 0);
    }

    /// <summary>
    /// Hide all taskbars
    /// </summary>
    public static void HideAll()
    {
        int result = 0;
        do
        {
            result = FindWindowEx(0, result, "Shell_TrayWnd", null);
            ShowWindow(result, _SW_HIDE);
        }
        while (result != 0);
    }
}

CSS

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

Answer 1

这是一个很好的主意！

我已经在不是真正的mobil中测试过您的代码，而是在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）

1 个答案: