如何添加纯CSS视差滚动

Question

我想添加一些纯粹的CSS视差滚动功能到我的网站，但我试过的一切似乎并没有工作。我也在这里搜索了答案，但没有回答我的问题。有没有人知道我可以如何使用此代码：http://wolfleader116.github.io/ （对不起，Doctype声明不像实际文件中那样缩进。） 并添加纯CSS视差滚动功能，以便背景以半速滚动？谢谢！

Answer 1

这是我做了我的网站（WIP）与parralax滚动（http://www.ideathhead.co.uk）：

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

这是字面上的，视差滚动的基本知识，无论如何，如果你对interwebs进一步挖掘，你可以做一些玩弄一些凉的效果，请记住，谷歌是你的朋友！

_________________________________________________________________

下面是可选的，如果你愿意用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 2

你可以试试这个教程。 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 3

可以使用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 4

，同时寻找HTML/CSS代码库，我可以用它来创建客户网站上发现了这个问题。这里有两个选项，一个非常简单，另一个更复杂。两者似乎都适用于手机和平板电脑。 CSS可能不适用于旧浏览器，但这可能不是问题。

下面是简单的解决方案，很容易理解/使用：

https://bit.ly/1JDl5Wg

这里是更复杂，但更多的功能例如（向下滚动，使用WebKit修复演示代码）：

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

两种解决方案都从基思·克拉克。这些对我来说是非常有用的起点。希望他们会帮助任何对此主题感兴趣的人。