Apple TV parallax Pure CSS

apple-tv-parallax-pure-css.markdown

Apple TV parallax Pure CSS

It is an experiment to create parallax effect with pure CSS3 animation.

A Pen by Nirajan Basnet on CodePen.

License.

index.html

<div class="container">
 <div class="parallax">
  <div class="parallax-top-left"></div>
  <div class="parallax-top-right"></div>
  <div class="parallax-bottom-left"></div>
  <div class="parallax-bottom-right"></div>
  <div class="parallax-content">
   <div class="parallax-front">
    <h2>Pure CSS Parallax Demo</h2>
   </div>
   <div class="parallax-back">
    <img src="http://www.ijailbreak.com/wp-content/uploads/2012/09/NatGeo17.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper">
   </div>
  </div>
 </div>
</div>

style.scss

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

body {
	background: #f5f5f5;
	position: relative;
	font-family: "Lato", sans-serif;
}

.container {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	max-width: 720px;
	margin: 0 auto;
	padding: 20px;
}

.img-responsive {
	display: block;
	height: auto;
	width: 100%;
	max-width: 100%;
}

.rounded {
	border-radius: 4px;
}

.parallax {
	display: block;
	height: auto;
	position: relative;
	width: auto;

	&-content {
		box-shadow: 0 32px 60px rgba(69, 77, 93, .3);
		height: auto;
		transform: perspective(1600px);
		transform-style: preserve-3d;
		transition: all .4s ease;
		width: 100%;

		&:before {
			content: "";
			display: block;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}
	}

	&-front {
		align-items: center;
		color: #fff;
		display: flex;
		height: 100%;
		justify-content: center;
		left: 0;
		position: absolute;
		text-align: center;
		text-shadow: 0 0 3rem rgba(69, 77, 93, .95);
		top: 0;
		transform: translateZ(16px) scale(.9);
		transition: all .4s ease;
		width: 100%;
		z-index: 1;
	}

	&-top-left {
		height: 50%;
		left: 0;
		position: absolute;
		top: 0;
		width: 50%;
		z-index: 300;
		cursor: pointer;

		&:hover ~ .parallax-content {
			transform: perspective(1600px) rotateX(-5deg) rotateY(5deg);
			&:before {
				background: linear-gradient(
					135deg,
					rgba(255, 255, 255, .25) 0%,
					rgba(255, 255, 255, 0) 50%
				);
			}

			.parallax-front {
				transform: translate3d(-.10px, -.10px, 16px) scale(.9);
			}
		}
	}

	&-top-right {
		height: 50%;
		position: absolute;
		right: 0;
		top: 0;
		width: 50%;
		z-index: 300;
		cursor: pointer;

		&:hover ~ .parallax-content {
			transform: perspective(1600px) rotateX(-5deg) rotateY(-5deg);
			&:before {
				background: linear-gradient(
					-135deg,
					rgba(255, 255, 255, .25) 0%,
					rgba(255, 255, 255, 0) 50%
				);
			}

			.parallax-front {
				transform: translate3d(.10px, -.10px, 16px) scale(.9);
			}
		}
	}

	&-bottom-left {
		bottom: 0;
		height: 50%;
		left: 0;
		position: absolute;
		width: 50%;
		z-index: 300;
		cursor: pointer;

		&:hover ~ .parallax-content {
			transform: perspective(1600px) rotateX(5deg) rotateY(5deg);

			&:before {
				background: linear-gradient(
					45deg,
					rgba(255, 255, 255, .25) 0%,
					rgba(255, 255, 255, 0) 50%
				);
			}

			.parallax-front {
				transform: translate3d(-.10px, .10px, 16px) scale(.9);
			}
		}
	}

	&-bottom-right {
		bottom: 0;
		height: 50%;
		position: absolute;
		right: 0;
		width: 50%;
		z-index: 300;
		cursor: pointer;

		&:hover ~ .parallax-content {
			transform: perspective(1600px) rotateX(5deg) rotateY(-5deg);

			&:before {
				background: linear-gradient(
					-45deg,
					rgba(255, 255, 255, .25) 0%,
					rgba(255, 255, 255, 0) 50%
				);
			}
			.parallax-front {
				transform: translate3d(.10px, .10px, 16px) scale(.9);
			}
		}
	}
}