视差滚动效果答案

【问题标题】：Parallax Scrolling effect视差滚动效果
【发布时间】：2014-04-04 20:08:28
【问题描述】：

我试图用文本和颜色创建一个基本的视差滚动示例；没有图像。然而，效果似乎不起作用。代码如下：

<!doctype html>
<html>
<head>
<title>Parallax Scrolling</title>
</head>
<style type="text/css">
body{
margin:0;
padding:0;
} 
#img1 { 
background: rgb(44,89,238) 50% 0 repeat fixed; 
height: 1000px;  
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative; 
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#img2 { 
background: rgb(252,151,20) 50% 0 repeat fixed; 
height: 1000px;
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative; 
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
p {
height: 458px;
position: absolute;
top: 291px;
width: 100%;
font-size: 100px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

$(document).ready(function(){


     var $window = $(window); 

     $('section[data-type="background"]').each(function(){
     var $bgobj = $(this); // assigning the object
     $(window).scroll(function() {
     var yPos = -($window.scrollTop() / $bgobj.data('speed'));
     var coords = '50% '+ yPos + 'px';
     $bgobj.css({ backgroundPosition: coords });
     });
     });
     });

</script>
<body>
<section id="img1"><p>Hello</p></section>
<section id="img2"><p>Hello</p></section>
</body>
</html>

我尝试编辑 css，但似乎没有任何效果。请帮忙。

【问题讨论】：

标签： jquery html css parallax.js

【解决方案1】：

那里有一些方便的 Parallax 滚动 JS 库，它们可能会有所帮助，看看：

滚动效果：

http://markdalgleish.com/projects/stellar.js/

Stellar 非常有用且简单，可以像在元素中添加data-stellar-ratio="" 一样简单，但可以使用 jQuery 进行调整，它是用 jQuery 编写的，因此需要 jQuery 才能使用它。

陀螺仪/鼠标移动效果：

http://wagerfield.github.io/parallax/

Parallax.js 也很方便，也很酷，虽然这不是你提到的 Parallax 滚动，但我想你仍然会喜欢它。 Parallax 是用 jQuery 和 JavaScript 编写的，所以不需要 jQuery。

【讨论】：

你知道我需要做什么来解决我的问题吗？
@android211 当那里已经列出了 2 个非常好的产品时，自己制作将是愚蠢的。
@android211 看看他们，我想你会喜欢的。它们是完全可定制的。
我很喜欢你的建议，但我想知道如何让我的视差滚动示例工作。代码中可能有什么？