I use this code for a parallax effect for a website I'm creating, works great in safari and firefox(mac). But in chrome(mac) it gets laggy, the same for when I try it on iPad and on my iPhone 6.
Javascript:
var ypos,image;
function parallax() {
image = document.getElementById('bgImage');
ypos = window.pageYOffset;
image.style.top = ypos * .4+ 'px';
}
window.addEventListener('scroll', parallax),false;
html:
<img class="img-responsive" id="bgImage" src="images/bgtopg.jpg">
</div>
<div id="box1" class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet.....</p>
</div>
(img-responsive - from bootstrap)
css:
#bgImage {
position: relative;
z-index: -1
}
Any ideas what is causing the lag-effect?