1
나는 잘못하고있는 것을 알아 내려고 노력하고 있지만 이해하지 못합니다. 나는이 시차를 좀 처음 접했어. 크롬 콘솔을 확인했는데 그런 식으로 실수를 찾을 수 없습니다. 저 좀 도와 주 시겠어요?시차 효과가 작동하지 않습니다
시차 효과가 작동하지 않는 것은 정상적인 사진 만 표시하기 때문에 문제가 무엇인지 파악할 수 없습니다. 아마도 뭔가 쉽게 만들거나 뭔가를 잊어 버렸을 것입니다.
아무도 모르게됩니다. :)
<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>