如果你愿意使用JS的话，那么下面是可选的

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

您可以使用background-attachment: fixed css样式创建仅CSS视差滚动。这使用了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; 
    }
}

<强> DEMO

Answer 3

这就是我使用parralax scrolling（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;
}

这就是字面意思，无论如何，对于视差滚动的基础知识，如果你进一步挖掘互联网，你可以做一些游戏以获得更酷的效果，请记住，GOOGLE是你的朋友！

<强> _________________________________________________________________

如果你愿意使用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不是名字，因为我最初对此感到困惑！

我很乐意提供帮助：）

Answer 4

在搜索可用于创建客户端网站的HTML / CSS代码库时发现此问题。这里有两个选项，一个非常简单，另一个更复杂。两者似乎都适用于手机和平板电脑。 CSS可能不适用于旧浏览器，但这可能不是问题。

这是一个简单的解决方案，相当容易理解/使用：

https://bit.ly/1JDl5Wg

以下是更复杂但功能更多的示例（向下滚动并使用webkit修复演示代码）：

http://keithclark.co.uk/articles/pure-css-parallax-websites/

两种解决方案均来自Keith Clark。这些作为起点非常有用。希望他们能够对任何对此主题感兴趣的人工作。

如何添加Pure CSS Parallax Scrolling

4 个答案:

如果你愿意使用JS的话，那么下面是可选的