CSS only parallax

Example of

by Andrés Leone

HTML

<div class="container">
    <div class="banner">agawgawg
        <img src="http://5d48184523c8a489ed05-91a4b8ed85c04e5358f91889505a4163.r43.cf1.rackcdn.com/6/4/large.jpg" alt="" class="image" />asdasd
    </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...

CSS

html,
body {
    height: 100%;
    overflow: hidden;
}

.container {
    height: 100%;
    perspective: 50px;
    perspective-origin: 0 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.banner {
    position: relative;
    transform-style: preserve-3d;
    z-index: -1;
}

.banner .image {
    transform: translateZ(-50px) scale(3);
    width: 100%;
}

.content {
    background-color: #fff;
}