Pure CSS Parallax

index.html

<div class="block parallax image1">
		<div class="container-center">
			<h1>Section 1</h1>
		</div>
	</div>
	<div class="block">
		<div class="container-center">
			<h2>SubTitle 1</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae vel explicabo odio rerum doloribus maiores nam dolorem sequi quam sit vitae a soluta, repudiandae, alias tempore. Nobis quos voluptatum harum exercitationem. Corporis voluptatum deserunt dolorum ex velit, provident, est enim excepturi eius debitis quo iste sequi nemo, officiis. Ipsam laborum officia aliquam et odio optio voluptate, dolores eum. Cum, voluptas facere incidunt enim a quod rerum soluta maiores tempora minus quos suscipit nulla quas odio voluptatem quaerat minima. Nam, nesciunt, atque! Eos inventore nesciunt magnam obcaecati quia. Veritatis nostrum, velit? Minus minima non ea, animi doloribus fugit illo ratione nesciunt maxime voluptate, odio quod numquam. Consectetur magnam architecto alias illo dolor velit in ipsum atque asperiores ex nemo quas neque facilis, nobis voluptates placeat. Quae, ex iure amet fugit esse possimus rerum reiciendis repellendus, cupiditate, iusto numquam magni similique inventore laboriosam! Mollitia natus blanditiis ipsam. Doloribus quaerat, quisquam voluptatum? Laboriosam deleniti odit adipisci eos illum iusto possimus laudantium reiciendis vero nesciunt id quos dicta, vitae, perferendis voluptatem saepe. Quae provident temporibus obcaecati nulla, praesentium nisi sit excepturi voluptatem veritatis dolore animi ducimus voluptate impedit tempore! Deleniti sunt, nemo aut distinctio atque corporis, numquam, ullam iure accusantium sapiente praesentium? Consectetur, sed?</p>
		</div>
	</div>
	<div class="block parallax image2">
		<div class="container-center">
			<h1>Section 2</h1>
		</div>
	</div>
	<div class="block">
		<div class="container-center">
			<h2>SubTitle 2</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae vel explicabo odio rerum doloribus maiores nam dolorem sequi quam sit vitae a soluta, repudiandae, alias tempore. Nobis quos voluptatum harum exercitationem. Corporis voluptatum deserunt dolorum ex velit, provident, est enim excepturi eius debitis quo iste sequi nemo, officiis. Ipsam laborum officia aliquam et odio optio voluptate, dolores eum. Cum, voluptas facere incidunt enim a quod rerum soluta maiores tempora minus quos suscipit nulla quas odio voluptatem quaerat minima. Nam, nesciunt, atque! Eos inventore nesciunt magnam obcaecati quia. Veritatis nostrum, velit? Minus minima non ea, animi doloribus fugit illo ratione nesciunt maxime voluptate, odio quod numquam. Consectetur magnam architecto alias illo dolor velit in ipsum atque asperiores ex nemo quas neque facilis, nobis voluptates placeat. Quae, ex iure amet fugit esse possimus rerum reiciendis repellendus, cupiditate, iusto numquam magni similique inventore laboriosam! Mollitia natus blanditiis ipsam. Doloribus quaerat, quisquam voluptatum? Laboriosam deleniti odit adipisci eos illum iusto possimus laudantium reiciendis vero nesciunt id quos dicta, vitae, perferendis voluptatem saepe. Quae provident temporibus obcaecati nulla, praesentium nisi sit excepturi voluptatem veritatis dolore animi ducimus voluptate impedit tempore! Deleniti sunt, nemo aut distinctio atque corporis, numquam, ullam iure accusantium sapiente praesentium? Consectetur, sed?</p>
		</div>
	</div>
	<div class="block parallax image3">
		<div class="container-center">
			<h1>Section 3</h1>
		</div>
	</div>
	<div class="block">
		<div class="container-center">
			<h2>SubTitle 3</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae vel explicabo odio rerum doloribus maiores nam dolorem sequi quam sit vitae a soluta, repudiandae, alias tempore. Nobis quos voluptatum harum exercitationem. Corporis voluptatum deserunt dolorum ex velit, provident, est enim excepturi eius debitis quo iste sequi nemo, officiis. Ipsam laborum officia aliquam et odio optio voluptate, dolores eum. Cum, voluptas facere incidunt enim a quod rerum soluta maiores tempora minus quos suscipit nulla quas odio voluptatem quaerat minima. Nam, nesciunt, atque! Eos inventore nesciunt magnam obcaecati quia. Veritatis nostrum, velit? Minus minima non ea, animi doloribus fugit illo ratione nesciunt maxime voluptate, odio quod numquam. Consectetur magnam architecto alias illo dolor velit in ipsum atque asperiores ex nemo quas neque facilis, nobis voluptates placeat. Quae, ex iure amet fugit esse possimus rerum reiciendis repellendus, cupiditate, iusto numquam magni similique inventore laboriosam! Mollitia natus blanditiis ipsam. Doloribus quaerat, quisquam voluptatum? Laboriosam deleniti odit adipisci eos illum iusto possimus laudantium reiciendis vero nesciunt id quos dicta, vitae, perferendis voluptatem saepe. Quae provident temporibus obcaecati nulla, praesentium nisi sit excepturi voluptatem veritatis dolore animi ducimus voluptate impedit tempore! Deleniti sunt, nemo aut distinctio atque corporis, numquam, ullam iure accusantium sapiente praesentium? Consectetur, sed?</p>
		</div>
	</div>

Pure CSS Parallax.markdown

Pure CSS Parallax

This example allows you to have a pure css parallax for your projects, this can be an amazing way to make some parallax effects with not javascript.

You just have knowlodge about HTML and CSS, and that's all.

A Pen by Juorder Gonzalez on CodePen.

License.

script.js

/* This example only needs css, just for pure css parallax */

style.css

html, body{
			margin:0;
			padding:0;
		}

		.block{
			width:100%;
			margin:0;
			padding:0;
		}
		
		.container-center{
			max-width:980px;
			width:100%;
			margin:0 auto;
			padding:0;
			text-align: center;
			overflow: hidden;
		}

		.container-center p{
			text-align: justify;
		}

		.block h1{
			font-size: 160px;
			line-height: 300px;
			margin:0;
			color:white;
			text-shadow:0px 0px 3px black, 2px 3px 3px black, -3px 2px 3px gray;
			-ms-text-shadow:0px 0px 3px black, 2px 3px 3px black, -3px 2px 3px gray;
			-o-text-shadow:0px 0px 3px black, 2px 3px 3px black, -3px 2px 3px gray;
			-webkit-text-shadow:0px 0px 3px black, 2px 3px 3px black, -3px 2px 3px gray;
			-moz-text-shadow:0px 0px 3px black, 2px 3px 3px black, -3px 2px 3px gray;
		}

		.block h2{
			margin-bottom:40px;
			text-align: left;
		}

		.block.parallax{
			height:300px;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 50% 50%;
			background-attachment: fixed;
		}

		.block.image1{
			background-image: url('http://static1.squarespace.com/static/52bac564e4b0204d439ddf8f/54cfd439e4b0bdddd2237452/54d0e297e4b0425498e04b46/1422975641617/Rocky-Mountain-NP-ML.jpg?format=1500w');
		}
		.block.image2{
			background-image: url('http://globalepix.com/wp-content/uploads/2015/01/France_Hero-e1421729538916.jpg');
		}
		.block.image3{
			background-image: url('http://i.pbase.com/o6/60/412360/1/74892911.ZqpReaqs.P2183188191.jpg');
		}