CSS only parallax

Example of

by kmturley

HTML

<div class="header">
    <p>logo</p>
</div>
<div class="container">
    <div class="banner">
        <img src="http://5d48184523c8a489ed05-91a4b8ed85c04e5358f91889505a4163.r43.cf1.rackcdn.com/6/4/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...

CSS

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

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

h1,
p {
    font-weight: normal;
    line-height: 1.5em;
    margin: 0 0 0.5em 0;
}

.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;
}

.header p {
    margin: 10px 0;
}

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

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

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