如何添加纯CSS视差滚动

Question

我想为我的网站添加一些纯CSS视差滚动功能，但我尝试的所有功能似乎都不起作用。我也在这里寻找答案，但没有回答我的问题。有谁知道我该如何理解这段代码：http://wolfleader116.github.io/ (对不起，Doctype声明在实际文件中并不是这样缩进的。)并添加一个纯CSS视差滚动功能，使背景滚动速度减半？谢谢!

Answer 1

你可以试试这个教程。Tutorial Link 1 Tutorial Link 2

body { 
 margin:0;
 padding:0;
 perspective: 1px;
 transform-style: preserve-3d;
 height: 100%;
 overflow-y: scroll;
 overflow-x: hidden;
 font-family: Nunito;
}

Answer 2

可以使用css样式创建仅background-attachment: fixed视差滚动。这使用了background-image是固定的，其余内容随页面滚动的概念。

.parallax div{
    background-attachment: fixed;
    height: 50vh;
    text-indent : -9999px;
    position : relative;
    background-position   : center center;
    background-size       : cover;
      &:nth-child( 2n ) {
      box-shadow : inset 0 0 1em #111; 
    }
}

Answer 3

这是我如何使用parralax滚动(http://www.ideathhead.co.uk)创建我的网站(WIP)的：

HTML：

使用下面的属性添加节标记。(每个部分代表一张幻灯片)

<section name="home" id="home" data-type="background" data-speed="10">
          <p class="buzz-out" id="Welcome"></p>                    
        </section>

CSS:

这将确保您的背景图像跨越整个页面，并针对每个分辨率调整其大小！

#home {
background: url(img/slide1.png) 50% 0 repeat fixed;
min-height: 100%;
background-size: cover;
margin: 0 auto;
}

这就是它的字面意思，无论如何，对于视差滚动的基础知识，如果你深入挖掘互联网，你可以做一些更酷的效果，记住，谷歌是你的朋友！

_________________________________________________________________

如果你愿意使用一点JS，下面的是可选的！！

_________________________________________________________________

此外，提示是，如果您想要添加按钮的滚动平滑到某些页面，然后添加到一个JavaScript文件：

JS:

此脚本使页面滚动更加流畅，因此它不会跳转到页面的一部分

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

然后，在HTML中的标记中，将href设置为要滚动到的部分的ID，它也会顺利地执行此操作！作为一个示例，这是部分：

<section name="home" id="home" data-type="background" data-speed="10">
          <p class="buzz-out" id="Welcome"></p>   
        </section>  

，这是按钮：

<a href="#home">CLICK</a>

请记住，这是ID而不是名称，因为我一开始对此感到困惑！

我很高兴能帮上忙:)