CSS only parallax

Example of

by Kenneth Luplau-Brøgger

HTML

<div class="header">
    <p>logo</p>
</div>
<div class="container">
    <div class="banner">
        <img src="https://www.hhi-ni.com/wp-content/uploads/2017/05/6823214-large.jpg" alt="" class="image" />
    </div>

    <div class="content">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Consectetur adipiscing elit. Aliquam non ligula non sem pulvinar efficitur vitae sed arcu.</p>
        <p>Sed et quam id massa pellentesque interdum. In rutrum, odio a tincidunt feugiat, tellus arcu maximus turpis, nec lacinia leo lacus ac dui. Donec congue commodo nisi in tristique.</p>
        <p>Consectetur adipiscing elit. Aliquam non ligula non sem pulvinar efficitur vitae sed arcu.</p>
        <p>Sed et quam id massa pellentesque interdum. In rutrum, odio a tincidunt feugiat, tellus arcu maximus turpis, nec lacinia leo lacus ac dui. Donec congue commodo nisi in tristique.</p>
        <p>Consectetur adipiscing elit. Aliquam non ligula non sem pulvinar efficitur vitae sed arcu.</p>
        <p>Sed et quam id massa pellentesque interdum. In rutrum, odio a tincidunt feugiat, tellus arcu maximus turpis, nec lacinia leo lacus ac dui. Donec congue commodo nisi in tristique.</p>
        <p>Consectetur adipiscing elit. Aliquam non ligula non sem pulvinar efficitur vitae sed arcu.</p>
        <p>Sed et quam id massa pellentesque interdum. In rutrum, odio a tincidunt feugiat, tellus arcu maximus turpis, nec lacinia leo lacus ac dui. Donec congue commodo nisi in tristique.</p>
        <p>Consectetur adipiscing elit. Aliquam non ligula non sem pulvinar efficitur vitae sed arcu.</p>
        <p>Sed et quam id massa pellentesque interdum. In rutrum, odio a tincidunt feugiat, tellus arcu maximus turpis, nec lacinia leo lacus ac dui. Donec congue commodo nisi in tristique.</p>
        <p>Consectetur adipiscing elit. Aliquam non ligula non sem pulvinar efficitur vitae sed arcu.</p>
        <p>Sed et quam id massa pellentesque interdum. In rutrum, odio a tincidunt feugiat, tellus arcu...

CSS

html,
body {
  font-family: sans-serif;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.container {
  --perspective: 1px;
  --parallax: 5;

  height: 100%;
  -webkit-perspective: v
  perspective: var(--perspective);
  perspective-origin: 0 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.header {
  -webkit-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
  background-color: #fff;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: 3;
}

.banner {
  position: relative;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /* firefox requires this for children */
  z-index: -1;
}

.banner {
  transform-origin: 0% 0%;
  transform: scale(calc(1 + var(--parallax)));
}

.banner .image {
  transform: translate3d(0, 0, calc(var(--perspective) * var(--parallax) * -1));
  width: 100%;
}

.content {
  background-color: #fff;
  padding: 20px;
}