I just had an issue, that I have 2 hero image sections on the same page, and I had to use background-attachement: fixed
on them. Don't have to say, that the scroll is very slow on most browsers (looking at you IE). So the performance is not very good. Oh and this site has also some parallax scrolled elements (with stellar.js)
with smooth scroll (used: nicescroll.js for this). Ofcourse I made the images as small as possible and try not to use background-size: cover
(performance again).
Oh and I use the window.requestAnimationFrame()
in my core.js file (performance again).
Is there a way to make this 2 hero sections images work like background-image: fixed
?
index.html
<div class="first-hero">
</div>
<div class="content">
.
.
lots of parallax content goes here
.
.
</div>
<div class="second-hero">
</div>
style.css
.first-hero{
background: transparent url('image1.jpg') no-repeat;
background-attachment: fixed;
height:400px;
width:100vw;
}
.second-hero{
background: transparent url('image2.jpg') no-repeat;
background-attachment: fixed;
height:350px;
width:100vw;
}
.content{
width:100vw;
height:2500px;
}