I'm trying to figure out what I've been doing wrong but I don't get it. I'm kinda new to this parallax. I checked the chrome console and can't find any mistakes that way. Could you please help me?
The parallax effect won't work it only shows normal pictures, I can't figure out what the problem is. Probably I've made something easy, or forgot something.
Anyone got any idea? :)
<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>
I solved the problem.
var diffheight = $divs.eq(0).height() - liHeight;
Spelled diffHeight with a small "h" and when i used it i called it with a big "H"
scroll = ~~(offset/liHeight * diffHeight);
So i Simply changed the small h to a big and that was it.
Now it works perfectly!