Pure CSS vertical and horisontal parallax

In this example below you will see how to do a Pure CSS vertical and horisontal parallax with some HTML / CSS and Javascript

Based on CSS3 Z-translate. Thanks to Lea Verou - http://lea.verou.me/css3patterns/ and Chris Coyier - http://css-tricks.com/examples/ShapesOfCSS/

Thumbnail
This awesome code was written by Coolok, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Coolok ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pure CSS vertical and horisontal parallax</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div  class="wrapper">
  <div id="space-invader"></div>
	<div id="talkbubble">Scroll thru the space horizontally! Resize height of screen to fly vertically!</div>
		<div class="img">
			<div class="p z2"><div class="pattern0"></div></div>
			<div class="p z1"><div class="pattern1"></div></div>
			<div class="p z0"><div class="pattern2"></div></div>
			<div class="p z_1"><div class="pattern3"></div></div>
  </div>
  </div> 
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Coolok/pure-css-vertical-and-horisontal-parallax-tGlnh */
body,.wrapper{
  overflow: hidden;
  background:#010101
}

.wrapper{
 position:relative;
  top:-8px;
  left:-4px
}

	.text{
		display:inline-block;
		height:100%;
		width:33%;
		background: #010101;
	}
	
	.img{
	height: 500px;
	height: 100vh;
  width:3420px;
	overflow-x: auto;
	-webkit-perspective: 300px;
	perspective: 300px;
	overflow-y: auto;
	position: relative;
	background:#000;
	top: -8px;
   left:-8px
}
	
	.p div{
	height:100%;
	width:100%;
	
	}
	
	.p{
	height:100%;
	width:100%;
	left: 500px;
	}
	
	.pattern0{
	background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
	background-size: 350px 350px, 250px 250px, 132px 135px, 210px 225px;
	background-position: 0 0, 94px 60px, 120px 270px, 13px 100px;
	-webkit-transform: translateZ(230px) scale(1);
	transform: translateZ(230px) scale(1);
	}
	
	
	.pattern1{
	background-image:
	radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
	radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
	radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
	radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
	background-size: 550px 550px, 350px 350px, 250px 250px, 144px 150px; 
	background-position: 0 0, 55px 60px, 120px 270px, 90px 100px;
		-webkit-transform: translateZ(90px) scale(1.7);
		transform: translateZ(90px) scale(1.7);
	}
	
	
	
.pattern2 {
	background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
	background-size: 350px 350px, 550px 550px, 350px 350px, 350px 350px;
	background-position: 0 0, 80px 80px, 115px 255px, 70px 100px;
	-webkit-transform: translateZ(0) scale(2);
	transform: translateZ(0) scale(2);
}
	
	.pattern3{
	background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 250px 250px;
background-position: 0 0, 40px 60px, 130px 270px, 20px 100px;
	-webkit-transform: translateZ(-300px) scale(3);
    transform: translateZ(-300px) scale(3);
	}
	.p{ 
    position: absolute;
    height: 500px; /* fallback for older browsers */
    height: 100vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
	}

 
  .z2{z-index: 2;}
  .z1{z-index: 1;}
  .z0{z-index: 0;}
  .z_1{z-index: -1;}
  
  
  
  #space-invader{

  box-shadow:
    0 0 0 1em white,
    0 1em 0 1em white,
    -2.5em 1.5em 0 .5em white,
    2.5em 1.5em 0 .5em white,
    -3em -3em 0 0 white,
    3em -3em 0 0 white,
    -2em -2em 0 0 white,
    2em -2em 0 0 white,
    -3em -1em 0 0 white,
    -2em -1em 0 0 white,
    2em -1em 0 0 white,
    3em -1em 0 0 white,
    -4em 0 0 0 white,
    -3em 0 0 0 white,
    3em 0 0 0 white,
    4em 0 0 0 white,
    -5em 1em 0 0 white,
    -4em 1em 0 0 white,
    4em 1em 0 0 white,
    5em 1em 0 0 white,
    -5em 2em 0 0 white,
    5em 2em 0 0 white,
    -5em 3em 0 0 white,
    -3em 3em 0 0 white,
    3em 3em 0 0 white,
    5em 3em 0 0 white,
    -2em 4em 0 0 white,
    -1em 4em 0 0 white,
    1em 4em 0 0 white,
    2em 4em 0 0 white;

    background: white;
    width: 1em;
    height: 1em;
    overflow: hidden;
    z-index:100;
    margin: 50px 0 70px 65px;
    position:fixed;
    top:10px;
    left:70px;
  }
  
  
  #talkbubble {
   z-index:100;
   width: 120px;
   height: 140px;
   background: white;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
   position:fixed;
	top: 30px;
  left: 280px;
  padding: 20px;
  font: 20px/20px arial;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid white;
   border-bottom: 13px solid transparent;
}

Comments