Two HTML elements, header and main. When scrolling, the header is slower than the page flow. This parallax effect is achieved with the CSS properties perspective / transform:translateZ.
According to caniuse.com, those properties should work not only on desktop browsers, but also on iOS safari - which they don't.
Why not?
/*
--perspective: 5px;
--distance: -2px;
*/
body {
overflow: hidden;
margin: 0;
}
.wrapper {
perspective: 5px;
perspective-origin: center top;
position: relative;
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
}
header {
height: 200px;
max-width: 100%;
background-image: url(https://placekitten.com/1200/400);
background-size: cover;
/* (perspective — distance) / perspective = scaleFactor */
transform: translateZ(-2px) scale( calc(7 / 5));
transform-origin: 50% top;
}
main {
height: 200vh;
background-image: linear-gradient( #ccf, #a00);
} <div class="wrapper">
<header></header>
<main>Lorem ipsum dolor<br> sit amet consectetur adipisicing elit.<br> Ea vero necessitatibus delectus<br>ullam hic! Aliquam voluptatem pariatur vero vel nesciunt, eius velit commodi labore voluptatibus amet quidem aspernatur itaque ad.</main>
</div>
