I am experiencing some issues with full screen divs that overlay each other on scroll and a background image. When scrolling back to the top in Chrome, the background shifts down slightly, and in Safari, the same issue occurs when scrolling down. I have created a fiddle here to demonstrate this behavior. You can see how the panel content overlaps after scrolling up again, creating different effects in Chrome and Safari.
The problem seems to be caused by the background-image animation. Without it, everything works fine.
#bg {
background-image: url('https://unsplash.it/800?random');
background-size: cover;
z-index: -1;
animation: zoom 10s;
height: 100%;
width: 100vw;
position: absolute;
-webkit-animation-fill-mode: forwards;
background-attachment: fixed;
}
@keyframes zoom {
0% { transform:scale(1,1); }
100% { transform:scale(1.1,1.1);}
}
I am looking for a solution to use the animation while maintaining the desired effects on the page.
This is the HTML code:
<body>
<div id="bg">
</div>
<div class="panel panel-one">
<div class="panel-inner">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p>
</div>
</div>
<div class="panel panel-two">
<div class="panel-inner">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p>
</div>
</div>
<div class="panel panel-three">
<div class="panel-inner">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p>
</div>
</div>
</body>
And here is the script handling the scrolling:
$(function() {
// Set up variables
var _window = $(window),
panels = $('.panel'),
panelsY = [];
// Cache the position of each panel
$.each(panels, function(i, el) {
panelsY.push(panels.eq(i).offset().top);
});
// Bind our function to window scroll
_window.bind('scroll', function() {
updateWindow();
});
// Update the window
function updateWindow() {
var y = _window.scrollTop();
// Loop through our panel positions
for (i = 0, l = panels.length; i < l; i++) {
/*
Firstly, we break if we're checking our last panel,
otherwise we compare if the y position is in between
two panels
*/
if ((i === l - 1) || (y >= panelsY[i] && y <= panelsY[i+1])) {
break;
}
};
// Update classes
panels.not(':eq(' + i + ')').removeClass('panel-fixed');
panels.eq(i).addClass('panel-fixed');
};
});