視差滾動效果

Question

我試圖用文本和顏色創建一個基本的視差滾動示例; 沒有圖像。 然而，效果似乎不起作用。 這是代碼：

<!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但似乎沒有任何工作。 請幫忙。

Answer 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。

視差滾動效果

問題描述

1 個解決方案

解決方案1
2 已采納

視差滾動效果

問題描述

1 個解決方案

解決方案1 2 已采納

解決方案1
2 已采納