1
我想弄清楚我一直在做錯什麼，但我不明白。我對這個視差有點新鮮。我檢查了Chrome控制檯，並且找不到任何錯誤。你可以幫我嗎？視差效應將無效
視差效果不起作用它只顯示正常的圖片，我無法弄清楚是什麼問題。可能我做了一些簡單的事情，或者忘記了一些事情。
任何人有任何想法？ :)
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
}
ul{
margin:0;
padding:0;
}
ul li{
list-style:none;
overflow:none;
height:600px;
}
.parallax-background{
height:700px;
}
.parallax1{
background-image:url('parallax1.jpg');
}
.parallax2{
background-image:url('parallax2.jpg');
background-position:50% 100%;
}
.parallax3{
background-image:url('parallax3.jpg');
}
.parallax4{
background-image:url('parallax4.jpg');
}
ul li .subcontent{
position:absolute;
top:500px;
left:100px;
color:white;
font-family:Arial, Helvetica, sans-serif;
}
h1{
font-size:70px;
margin-bottom:0px
}
h2{
font-size:30px;
margin-top:0px;
}
</style>
</head>
<body>
<ul class="parallax">
<li>
<div class="parallax-background parallax1"></div>
</li>
<li>
<div class="parallax-background parallax2"></div>
<div class="subcontent">
<h1> Sample Text</h1>
<h2> Hey there </h2>
</div>
</li>
<li>
<div class="parallax-background parallax3"></div>
</li>
<li>
<div class="parallax-background parallax4"></div>
</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function($) {
var $container = $(".parallax");
var $divs = $container.find("div.parallax-background");
var thingBeingScrolled = document.body;
var liHeight = $divs.eq(0).closest("li").height();
var diffheight = $divs.eq(0).height() - liHeight;
var len = $divs.length;
var i,div,li,offset,scroll ,top, transform, diffHeight;
var offsets = $divs.get().map(function(div,d){
return $(div).offset();
});
var render = function(){
top = thingBeingScrolled.scrollTop;
for(i=0;i<len;i++){
div = $divs[i];
offset = top - offsets[i].top;
scroll = ~~(offset/liHeight * diffHeight);
transform = 'translate3d(0px, ' + scroll + 'px, 0px)';
div.style.MozTransform = transform;
div.style.msTransform = transform;
div.style.Otransform = transform;
div.style.transform = transform;
div.style.webkitTransform = transform;
}
};
(function loop(){
requestAnimationFrame(loop);
render();
})();
})(jQuery);
</script>
</body>
</html>