jquery - 背景保持静止且内容在点击或滚动时转换的滚动网站

Question

我正在寻找一个模板或一个地方来教授如何创建这样的网站，例如:

http://www.refletcommunication.com/en https://www.artistsweb.com/work

页面基本上保持不变，但您可以稍微滚动一下，内容会发生变化。或者单击链接，内容会发生变化。但背景保持中立。

我希望这是一个有效的问题。我为自己设计了一个投资组合网站，它会产生这种效果，只是不确定它叫什么，所以我可以学习如何编码。它的主页上有内容，右侧有链接。如果您滚动或单击链接，内容将转换为新内容。而背景保持静止。

希望这是有道理的!谢谢

Answer 1

如果我正确理解你的问题，那么我使用的一种方法是将带有 position: absolute 的 div 堆叠在彼此顶部，然后切换 active 类这将指示哪个元素当前可见，并且此类将具有 z-index: 100 或 1000 或您想要的任何数字，但它必须高于堆叠元素的数量。在 HTML 中，您需要将 active 类添加到加载页面后可见的元素。然后使用 JS，您将更改具有 active 类的元素。在 JS 中我使用:

jQuery: https://jquery.com/download/
jQuery 鼠标滚轮插件:https://github.com/jquery/jquery-mousewheel

HTML:

<div class="container">
    <div class="vertically-stacked active"> //first visible bannner
        <h1>Hello</h1>
    </div>
    <div class="vertically-stacked">  //visible only if class active is added
        <h1>World</h1>
    </div>
</div>

您可能有无数个垂直堆叠的元素。

CSS:

.container    //container of vertically stacked elements
{
    position: relative    //or absolute but not static 
}

.vertically-stacked
{
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all .25s;   //time which takes to switch the active element
    -moz-transition: all .25s;
    -o-transition: all .25s;
    -webkit-transition: all .25s;
}

.vertically-stacked.active
{
    opacity: 1;
    z-index: 100;
}

JS:

$(document).on('mousewheel', function (e)
{
    var $verticallyStacked = $('.vertically-stacked'),
        oldActive = $verticallyStacked.index($('.vertically-stacked.active')),
        newActive;

    $verticallyStacked.eq(oldActive).removeClass('active');
    if (e.deltaY < 0) //scroll down
    {       
        newActive = oldActive + 1;
    }
    else //scroll up
    {
        newActive = oldActive - 1;
    }
    $verticallyStacked.eq(newActive).addClass('active');
});