Parallax.js

Full demo on http://wagerfield.github.io/parallax/ What is a parallax.js How do you make a parallax.js? This script and codes were developed by Englishextra on 23 March 2022, Wednesday.

How do I make an parallax.js?
  1. Parallax.js Previews
  2. Parallax.js HTML Codes
  3. Parallax.js CSS Codes
  4. Parallax.js JS Codes
Parallax.js Previews

Parallax.js HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Parallax.js</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
 <!-- project url https://github.com/wagerfield/parallax/</br> -->
 <!-- full demo https://wagerfield.github.io/parallax/ -->
<html class="mouse">
<body>
	<div id="container" class="wrapper">
		<ul id="scene" class="scene unselectable" data-friction-x="0.1" data-friction-y="0.1" data-scalar-x="25" data-scalar-y="15" style="width: 1680px; height: 569px; -webkit-transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;">
			<li class="layer" data-depth="0.00" style="position: relative; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(0%, 0%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;"></li>
			<li class="layer" data-depth="0.10" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(0.29761904761904784%, -1.4893992932862183%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;"><div class="background"></div></li>
			<li class="layer" data-depth="0.10" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(0.29761904761904784%, -1.4893992932862183%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;"><div class="light orange b phase-4"></div></li>
			<li class="layer" data-depth="0.10" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(0.29761904761904784%, -1.4893992932862183%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;"><div class="light purple c phase-5"></div></li>
			<li class="layer" data-depth="0.10" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(0.29761904761904784%, -1.4893992932862183%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;"><div class="light orange d phase-3"></div></li>
			<li class="layer" data-depth="0.15" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(0.4464285714285717%, -2.234098939929327%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;">
				<ul class="rope depth-10">
          <li><img src="https://wagerfield.github.io/parallax/assets/images/rope.png" alt="Rope"/></li>
					<li class="hanger position-2">
						<div class="board cloud-2 swing-1"></div>
					</li>
					<li class="hanger position-4">
						<div class="board cloud-1 swing-3"></div>
					</li>
					<li class="hanger position-8">
						<div class="board birds swing-5"></div>
					</li>
				</ul>
			</li>
			<li class="layer" data-depth="0.20" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(0.5952380952380957%, -2.9787985865724367%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;"><h1 class="title">parallax<em>.js</em></h1></li>
			<li class="layer" data-depth="0.30" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(0.8928571428571433%, -4.468197879858654%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;">
				<ul class="rope depth-30">
          <li><img src="https://wagerfield.github.io/parallax/assets/images/rope.png" alt="Rope"/></li>
					<li class="hanger position-1">
						<div class="board cloud-1 swing-3"></div>
					</li>
					<li class="hanger position-5">
						<div class="board cloud-4 swing-1"></div>
					</li>
				</ul>
			</li>
			<li class="layer" data-depth="0.30" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(0.8928571428571433%, -4.468197879858654%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;"><div class="wave paint depth-30"></div></li>
			<li class="layer" data-depth="0.60" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(1.1904761904761914%, -5.957597173144873%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;"><div class="wave plain depth-40"></div></li>
			<li class="layer" data-depth="0.50" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(1.488095238095239%, -7.4469964664310915%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;"><div class="wave paint depth-50"></div></li>
			<li class="layer" data-depth="0.60" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(1.7857142857142867%, -8.936395759717309%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;"><div class="lighthouse depth-60"></div></li>
			<li class="layer" data-depth="0.60" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(1.7857142857142867%, -8.936395759717309%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;">
				<ul class="rope depth-60">
          <li><img src="https://wagerfield.github.io/parallax/assets/images/rope.png" alt="Rope"/></li>
					<li class="hanger position-3">
						<div class="board birds swing-5"></div>
					</li>
					<li class="hanger position-6">
						<div class="board cloud-2 swing-2"></div>
					</li>
					<li class="hanger position-8">
						<div class="board cloud-3 swing-4"></div>
					</li>
				</ul>
			</li>
			<li class="layer" data-depth="0.60" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(1.7857142857142867%, -8.936395759717309%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;"><div class="wave plain depth-60"></div></li>
       <div class="test">
			<li class="layer" data-depth="0.80" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(2.3809523809523827%, -11.915194346289747%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;"><div class="wave plain depth-80"></div></li>
         </div>
		 
      <li class="layer" data-depth="1.00" style="position: absolute; display: block; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform: translate3d(2.976190476190478%, -14.893992932862183%, 0px); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;"><div class="wave paint depth-100"></li>
      </div>
		</ul>
	</div>
  </body>
</html>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>

Parallax.js CSS Codes

    html {
  font-family: "Roboto Slab", sans-serif;
  font-size: 12px; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.4em;
  background-color: black;
  text-align: center;
  color: white; }


em {
  font-style: normal;
  color: #d92400; }

img {
  display: block;
  width: 100%; }

ul {
  list-style: none;
  display: block;
  padding: 0;
  margin: 0;

}
.toggle {
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  margin: -24px;
  position: absolute;
  bottom: 11.6%;
  left: 50%; }
  .toggle.i .cross {
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    transform: rotateZ(0deg); }
    .toggle.i .cross .x {
      margin-left: -2px;
      width: 4px;
      margin-top: -12px; }
    .toggle.i .cross .y {
      margin-top: -4px;
      height: 16px; }

.cross {
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  position: absolute;
  left: 50%;
  top: 50%; }
  .cross .x, .cross .y {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #1d1f27;
    height: 4px;
    width: 4px;
    margin: -2px;
    position: absolute;
    left: 0;
    top: 0; }
  .cross .x {
    margin-left: -12px;
    margin-top: -2px;
    width: 24px; }
  .cross .y {
    margin-top: -12px;
    height: 24px; }

.prompt.hide {
  visibility: hidden; }
  .prompt.hide .panel {
    -webkit-transform: translate3d(0,250%,0) rotateY(360deg);
    -moz-transform: translate3d(0,250%,0) rotateY(360deg);
    transform: translate3d(0,250%,0) rotateY(360deg);
    opacity: 0; }
.prompt .cell {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px; }
.prompt .dismiss {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
  background-color: transparent;
  position: absolute;
  right: 4px;
  top: 4px; }
.prompt .x, .prompt .y {
  background: white; }
.prompt .center {
  max-width: 300px;
  width: 82%; }
.prompt .panel {
  -webkit-perspective: none;
  -moz-perspective: none;
  perspective: none;
  -webkit-transform-style: flat;
  -moz-transform-style: flat;
  transform-style: flat;
  -webkit-transition: all 1.8s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 1.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 1.8s cubic-bezier(0.77, 0, 0.175, 1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(0, 0, 0, 0.65);
  padding: 1.2em 0 1.8em; }
  .prompt .panel img {
    margin: 0.6em auto;
    width: 100px; }
  .prompt .panel h2 {
    margin: 0 0 0.4em; }
  .prompt .panel p {
    font-size: 1.25em;
    margin: 0 10% 1.25em;
    line-height: 1.25em;
    color: #999999; }
.prompt .tilt-scene {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform: translate3d(0,0,100px);
  -moz-transform: translate3d(0,0,100px);
  transform: translate3d(0,0,100px);
  margin: 0 auto;
  width: 60%; }
.prompt .tilt {
  -webkit-animation: tilt 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: tilt 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: tilt 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.scene,
.layer {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0; }

.scene {
  min-height: 460px;
  position: relative;
  overflow: hidden; }

.layer {
  position: absolute; }
  .layer div {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden; }

.title {
  font-size: 3em;
  text-shadow: 0 8px 6px rgba(0, 0, 0, 0.6);
  margin-top: -0.7em;
  position: absolute;
  width: 100%;
  top: 42%; }

.background {
  background: url(https://wagerfield.github.io/parallax/assets/images/background.jpg) no-repeat 50% 100%;
  bottom: 96px;
  background-size: cover;
  position: absolute;
  width: 110%;
  left: -5%;
  top: -5%; }

.lighthouse {
  -webkit-transform-origin: 50% 90%;
  -moz-transform-origin: 50% 90%;
  transform-origin: 50% 90%;
  -webkit-animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  margin: 0px -64px;
  background-size: 128px 224px;
  height: 224px;
  width: 128px;
  background-image: url(https://wagerfield.github.io/parallax/assets/images/lighthouse.png);
  background-repeat: no-repeat;
  bottom: 64px;
  position: absolute;
  right: 20%; }

.wave {
  background: transparent repeat-x;
  position: absolute;
  width: 300%;
  left: -100%; }
  .wave:after {
    background-color: black;
    position: absolute;
    display: block;
    content: "";
    height: 500px;
    width: 100%;
    top: 100%;
    left: 0; }
  .wave.plain {
    background-image: url(https://wagerfield.github.io/parallax/assets/images/wave-plain.png); }
  .wave.paint {
    background-image: url(https://wagerfield.github.io/parallax/assets/images/wave-paint.png); }

.light {
  margin: -120px -120px;
  background-size: 240px 240px;
  height: 240px;
  width: 240px;
  background-repeat: no-repeat;
  bottom: 112px;
  position: absolute;
  left: 50%; }
  .light.orange {
    background-image: url(https://wagerfield.github.io/parallax/assets/images/light-orange.png); }
  .light.purple {
    background-image: url(https://wagerfield.github.io/parallax/assets/images/light-purple.png); }
  .light.a {
    bottom: 80px;
    left: 20%; }
  .light.b {
    bottom: 80px;
    left: 30%; }
  .light.c {
    bottom: 112px;
    left: 45%; }
  .light.d {
    bottom: 96px;
    left: 60%; }
  .light.e {
    bottom: 112px;
    left: 75%; }
  .light.f {
    bottom: 64px;
    left: 80%; }
  .light.phase-1 {
    -webkit-animation: phase 20s 0.1s infinite linear;
    -moz-animation: phase 20s 0.1s infinite linear;
    animation: phase 20s 0.1s infinite linear; }
  .light.phase-2 {
    -webkit-animation: phase 18s 0.1s infinite linear;
    -moz-animation: phase 18s 0.1s infinite linear;
    animation: phase 18s 0.1s infinite linear; }
  .light.phase-3 {
    -webkit-animation: phase 16s 0.1s infinite linear;
    -moz-animation: phase 16s 0.1s infinite linear;
    animation: phase 16s 0.1s infinite linear; }
  .light.phase-4 {
    -webkit-animation: phase 14s 0.1s infinite linear;
    -moz-animation: phase 14s 0.1s infinite linear;
    animation: phase 14s 0.1s infinite linear; }
  .light.phase-5 {
    -webkit-animation: phase 12s 0.1s infinite linear;
    -moz-animation: phase 12s 0.1s infinite linear;
    animation: phase 12s 0.1s infinite linear; }
  .light.phase-6 {
    -webkit-animation: phase 10s 0.1s infinite linear;
    -moz-animation: phase 10s 0.1s infinite linear;
    animation: phase 10s 0.1s infinite linear; }

.rope {
  width: 120%;
  position: relative;
  left: -10%;
  position: relative; }

.hanger {
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: absolute; }
  .hanger.position-1 {
    top: 28%; }
  .hanger.position-2 {
    top: 46%; }
  .hanger.position-3 {
    top: 59%; }
  .hanger.position-4 {
    top: 66.5%; }
  .hanger.position-5 {
    top: 69.5%; }
  .hanger.position-6 {
    top: 66.5%; }
  .hanger.position-7 {
    top: 59%; }
  .hanger.position-8 {
    top: 46%; }
  .hanger.position-9 {
    top: 28%; }
  .hanger.position-1 {
    left: 10%; }
  .hanger.position-2 {
    left: 20%; }
  .hanger.position-3 {
    left: 30%; }
  .hanger.position-4 {
    left: 40%; }
  .hanger.position-5 {
    left: 50%; }
  .hanger.position-6 {
    left: 60%; }
  .hanger.position-7 {
    left: 70%; }
  .hanger.position-8 {
    left: 80%; }
  .hanger.position-9 {
    left: 90%; }

.board {
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  margin: 0px -140px;
  background-size: 280px 280px;
  height: 280px;
  width: 280px;
  background-repeat: no-repeat;
  position: absolute;
  top: -4px;
  left: 0; }
  .board.birds {
    background-image: url(https://wagerfield.github.io/parallax/assets/images/board-birds.png); }
  .board.cloud-1 {
    background-image: url(https://wagerfield.github.io/parallax/assets/images/board-cloud-1.png); }
  .board.cloud-2 {
    background-image: url(https://wagerfield.github.io/parallax/assets/images/board-cloud-2.png); }
  .board.cloud-3 {
    background-image: url(https://wagerfield.github.io/parallax/assets//images/board-cloud-3.png); }
  .board.cloud-4 {
    background-image: url(https://wagerfield.github.io/parallax/assets//images/board-cloud-4.png); }

.swing-1 {
  -webkit-animation: swing 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.swing-2 {
  -webkit-animation: swing 3.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 3.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 3.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.swing-3 {
  -webkit-animation: swing 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.swing-4 {
  -webkit-animation: swing 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.swing-5 {
  -webkit-animation: swing 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.wave.depth-10 {
  -webkit-animation: wave 8s 0.1s infinite linear;
  -moz-animation: wave 8s 0.1s infinite linear;
  animation: wave 8s 0.1s infinite linear;
  bottom: 140px;
  margin: 0px 0px;
  background-size: 40px 16px;
  height: 16px; }
  .wave.depth-10:after {
    height: 144px; }

.rope.depth-10 {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  top: 20%; }
  .rope.depth-10 .hanger {
    -webkit-transform: scale(0.25);
    -moz-transform: scale(0.25);
    transform: scale(0.25); }

.wave.depth-20 {
  -webkit-animation: wave 7.55556s 0.1s infinite linear;
  -moz-animation: wave 7.55556s 0.1s infinite linear;
  animation: wave 7.55556s 0.1s infinite linear;
  bottom: 120px;
  margin: 0px 0px;
  background-size: 80px 32px;
  height: 32px; }
  .wave.depth-20:after {
    height: 128px; }

.rope.depth-20 {
  -webkit-transform: scale(1.02778);
  -moz-transform: scale(1.02778);
  transform: scale(1.02778);
  top: 16.66667%; }
  .rope.depth-20 .hanger {
    -webkit-transform: scale(0.27778);
    -moz-transform: scale(0.27778);
    transform: scale(0.27778); }

.wave.depth-30 {
  -webkit-animation: wave 7.11111s 0.1s infinite linear;
  -moz-animation: wave 7.11111s 0.1s infinite linear;
  animation: wave 7.11111s 0.1s infinite linear;
  bottom: 100px;
  margin: 0px 0px;
  background-size: 120px 48px;
  height: 48px; }
  .wave.depth-30:after {
    height: 112px; }

.rope.depth-30 {
  -webkit-transform: scale(1.05556);
  -moz-transform: scale(1.05556);
  transform: scale(1.05556);
  top: 13.33333%; }
  .rope.depth-30 .hanger {
    -webkit-transform: scale(0.30556);
    -moz-transform: scale(0.30556);
    transform: scale(0.30556); }

.wave.depth-40 {
  -webkit-animation: wave 6.66667s 0.1s infinite linear;
  -moz-animation: wave 6.66667s 0.1s infinite linear;
  animation: wave 6.66667s 0.1s infinite linear;
  bottom: 80px;
  margin: 0px 0px;
  background-size: 160px 64px;
  height: 64px; }
  .wave.depth-40:after {
    height: 96px; }

.rope.depth-40 {
  -webkit-transform: scale(1.08333);
  -moz-transform: scale(1.08333);
  transform: scale(1.08333);
  top: 10.0%; }
  .rope.depth-40 .hanger {
    -webkit-transform: scale(0.33333);
    -moz-transform: scale(0.33333);
    transform: scale(0.33333); }

.wave.depth-50 {
  -webkit-animation: wave 6.22222s 0.1s infinite linear;
  -moz-animation: wave 6.22222s 0.1s infinite linear;
  animation: wave 6.22222s 0.1s infinite linear;
  bottom: 60px;
  margin: 0px 0px;
  background-size: 200px 80px;
  height: 80px; }
  .wave.depth-50:after {
    height: 80px; }

.rope.depth-50 {
  -webkit-transform: scale(1.11111);
  -moz-transform: scale(1.11111);
  transform: scale(1.11111);
  top: 6.66667%; }
  .rope.depth-50 .hanger {
    -webkit-transform: scale(0.36111);
    -moz-transform: scale(0.36111);
    transform: scale(0.36111); }

.wave.depth-60 {
  -webkit-animation: wave 5.77778s 0.1s infinite linear;
  -moz-animation: wave 5.77778s 0.1s infinite linear;
  animation: wave 5.77778s 0.1s infinite linear;
  bottom: 40px;
  margin: 0px 0px;
  background-size: 240px 96px;
  height: 96px; }
  .wave.depth-60:after {
    height: 64px; }

.rope.depth-60 {
  -webkit-transform: scale(1.13889);
  -moz-transform: scale(1.13889);
  transform: scale(1.13889);
  top: 3.33333%; }
  .rope.depth-60 .hanger {
    -webkit-transform: scale(0.38889);
    -moz-transform: scale(0.38889);
    transform: scale(0.38889); }

.wave.depth-70 {
  -webkit-animation: wave 5.33333s 0.1s infinite linear;
  -moz-animation: wave 5.33333s 0.1s infinite linear;
  animation: wave 5.33333s 0.1s infinite linear;
  bottom: 20px;
  margin: 0px 0px;
  background-size: 280px 112px;
  height: 112px; }
  .wave.depth-70:after {
    height: 48px; }

.rope.depth-70 {
  -webkit-transform: scale(1.16667);
  -moz-transform: scale(1.16667);
  transform: scale(1.16667);
  top: 0.0%; }
  .rope.depth-70 .hanger {
    -webkit-transform: scale(0.41667);
    -moz-transform: scale(0.41667);
    transform: scale(0.41667); }

.wave.depth-80 {
  -webkit-animation: wave 4.88889s 0.1s infinite linear;
  -moz-animation: wave 4.88889s 0.1s infinite linear;
  animation: wave 4.88889s 0.1s infinite linear;
  bottom: 0px;
  margin: 0px 0px;
  background-size: 320px 128px;
  height: 128px; }
  .wave.depth-80:after {
    height: 32px; }

.rope.depth-80 {
  -webkit-transform: scale(1.19444);
  -moz-transform: scale(1.19444);
  transform: scale(1.19444);
  top: -3.33333%; }
  .rope.depth-80 .hanger {
    -webkit-transform: scale(0.44444);
    -moz-transform: scale(0.44444);
    transform: scale(0.44444); }

.wave.depth-90 {
  -webkit-animation: wave 4.44444s 0.1s infinite linear;
  -moz-animation: wave 4.44444s 0.1s infinite linear;
  animation: wave 4.44444s 0.1s infinite linear;
  bottom: -20px;
  margin: 0px 0px;
  background-size: 360px 144px;
  height: 144px; }
  .wave.depth-90:after {
    height: 16px; }

.rope.depth-90 {
  -webkit-transform: scale(1.22222);
  -moz-transform: scale(1.22222);
  transform: scale(1.22222);
  top: -6.66667%; }
  .rope.depth-90 .hanger {
    -webkit-transform: scale(0.47222);
    -moz-transform: scale(0.47222);
    transform: scale(0.47222); }

.wave.depth-100 {
  -webkit-animation: wave 4s 0.1s infinite linear;
  -moz-animation: wave 4s 0.1s infinite linear;
  animation: wave 4s 0.1s infinite linear;
  bottom: -40px;
  margin: 0px 0px;
  background-size: 400px 160px;
  height: 160px; }
  .wave.depth-100:after {
    height: 0px; }

.rope.depth-100 {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  transform: scale(1.25);
  top: -10%; }
  .rope.depth-100 .hanger {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5); }

@media all and (min-width: 400px) {
  html {
    font-size: 12px; }

  .wrapper {
    min-height: 360px; }

  .about .panel header:before {
    background-size: 66px 90px; }

  .toggle {
    bottom: 12%; }

  .prompt .panel img {
    width: 80px; }

  .scene {
    min-height: 360px; }

  .rope.depth-10 {
    top: 10%; }
    .rope.depth-10 .hanger {
      -webkit-transform: scale(0.3);
      -moz-transform: scale(0.3);
      transform: scale(0.3); }

  .rope.depth-20 {
    top: 6.11111%; }
    .rope.depth-20 .hanger {
      -webkit-transform: scale(0.33333);
      -moz-transform: scale(0.33333);
      transform: scale(0.33333); }

  .rope.depth-30 {
    top: 2.22222%; }
    .rope.depth-30 .hanger {
      -webkit-transform: scale(0.36667);
      -moz-transform: scale(0.36667);
      transform: scale(0.36667); }

  .rope.depth-40 {
    top: -1.66667%; }
    .rope.depth-40 .hanger {
      -webkit-transform: scale(0.4);
      -moz-transform: scale(0.4);
      transform: scale(0.4); }

  .rope.depth-50 {
    top: -5.55556%; }
    .rope.depth-50 .hanger {
      -webkit-transform: scale(0.43333);
      -moz-transform: scale(0.43333);
      transform: scale(0.43333); }

  .rope.depth-60 {
    top: -9.44444%; }
    .rope.depth-60 .hanger {
      -webkit-transform: scale(0.46667);
      -moz-transform: scale(0.46667);
      transform: scale(0.46667); }

  .rope.depth-70 {
    top: -13.33333%; }
    .rope.depth-70 .hanger {
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      transform: scale(0.5); }

  .rope.depth-80 {
    top: -17.22222%; }
    .rope.depth-80 .hanger {
      -webkit-transform: scale(0.53333);
      -moz-transform: scale(0.53333);
      transform: scale(0.53333); }

  .rope.depth-90 {
    top: -21.11111%; }
    .rope.depth-90 .hanger {
      -webkit-transform: scale(0.56667);
      -moz-transform: scale(0.56667);
      transform: scale(0.56667); }

  .rope.depth-100 {
    top: -25%; }
    .rope.depth-100 .hanger {
      -webkit-transform: scale(0.6);
      -moz-transform: scale(0.6);
      transform: scale(0.6); } }
@media all and (min-width: 600px) {
  html {
    font-size: 15px; }

  button {
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    height: 56px;
    width: 56px; }

  footer .fb-like {
    position: static;
    bottom: auto;
    right: auto; }

  .center {
    max-width: 440px; }

  .about .panel:after {
    background-size: 252px 252px;
    height: 180px;
    width: 140px; }
  .about .panel header:before {
    background-size: 82.5px 112.5px; }

  .prompt {
    overflow: visible;
    display: block;
    width: 0; }
    .prompt.hide .panel {
      -webkit-transform: translate3d(0,50%,400px) rotateX(90deg);
      -moz-transform: translate3d(0,50%,400px) rotateX(90deg);
      transform: translate3d(0,50%,400px) rotateX(90deg); }
    .prompt .cell {
      position: absolute;
      display: block;
      bottom: 25px;
      left: 25px; }
    .prompt .dismiss {
      right: 0px;
      top: 0px; }
    .prompt .panel {
      -webkit-transition: all 1.2s cubic-bezier(0.77, 0, 0.175, 1);
      -moz-transition: all 1.2s cubic-bezier(0.77, 0, 0.175, 1);
      transition: all 1.2s cubic-bezier(0.77, 0, 0.175, 1);
      -webkit-transform-origin: 50% 100%;
      -moz-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
      padding: 1em 0 0.8em;
      width: 220px; }
      .prompt .panel img {
        margin: 0.4em auto 0.6em;
        width: 80px; }
      .prompt .panel h2 {
        font-size: 1.6em; }
      .prompt .panel p {
        font-size: 0.93333em;
        margin: 0 10% 1.3em;
        line-height: 1.3em; }

  .toggle {
    margin: -28px;
    bottom: 15%; }

  .title {
    font-size: 3.46667em; }

  .background {
    bottom: 96px; }

  .lighthouse {
    margin: 0px -96px;
    background-size: 192px 336px;
    height: 336px;
    width: 192px;
    bottom: 128px; }

  .light {
    margin: -140px -140px;
    background-size: 280px 280px;
    height: 280px;
    width: 280px; }
    .light.a {
      bottom: 144px; }
    .light.b {
      bottom: 144px; }
    .light.c {
      bottom: 192px; }
    .light.d {
      bottom: 160px; }
    .light.e {
      bottom: 192px; }
    .light.f {
      bottom: 128px; }

  .wave.depth-10 {
    bottom: 210px;
    margin: 0px 0px;
    background-size: 60px 24px;
    height: 24px; }
    .wave.depth-10:after {
      height: 216px; }

  .rope.depth-10 {
    top: 20%; }
    .rope.depth-10 .hanger {
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      transform: scale(0.5); }

  .wave.depth-20 {
    bottom: 180px;
    margin: 0px 0px;
    background-size: 120px 48px;
    height: 48px; }
    .wave.depth-20:after {
      height: 192px; }

  .rope.depth-20 {
    top: 16.66667%; }
    .rope.depth-20 .hanger {
      -webkit-transform: scale(0.55556);
      -moz-transform: scale(0.55556);
      transform: scale(0.55556); }

  .wave.depth-30 {
    bottom: 150px;
    margin: 0px 0px;
    background-size: 180px 72px;
    height: 72px; }
    .wave.depth-30:after {
      height: 168px; }

  .rope.depth-30 {
    top: 13.33333%; }
    .rope.depth-30 .hanger {
      -webkit-transform: scale(0.61111);
      -moz-transform: scale(0.61111);
      transform: scale(0.61111); }

  .wave.depth-40 {
    bottom: 120px;
    margin: 0px 0px;
    background-size: 240px 96px;
    height: 96px; }
    .wave.depth-40:after {
      height: 144px; }

  .rope.depth-40 {
    top: 10.0%; }
    .rope.depth-40 .hanger {
      -webkit-transform: scale(0.66667);
      -moz-transform: scale(0.66667);
      transform: scale(0.66667); }

  .wave.depth-50 {
    bottom: 90px;
    margin: 0px 0px;
    background-size: 300px 120px;
    height: 120px; }
    .wave.depth-50:after {
      height: 120px; }

  .rope.depth-50 {
    top: 6.66667%; }
    .rope.depth-50 .hanger {
      -webkit-transform: scale(0.72222);
      -moz-transform: scale(0.72222);
      transform: scale(0.72222); }

  .wave.depth-60 {
    bottom: 60px;
    margin: 0px 0px;
    background-size: 360px 144px;
    height: 144px; }
    .wave.depth-60:after {
      height: 96px; }

  .rope.depth-60 {
    top: 3.33333%; }
    .rope.depth-60 .hanger {
      -webkit-transform: scale(0.77778);
      -moz-transform: scale(0.77778);
      transform: scale(0.77778); }

  .wave.depth-70 {
    bottom: 30px;
    margin: 0px 0px;
    background-size: 420px 168px;
    height: 168px; }
    .wave.depth-70:after {
      height: 72px; }

  .rope.depth-70 {
    top: 0.0%; }
    .rope.depth-70 .hanger {
      -webkit-transform: scale(0.83333);
      -moz-transform: scale(0.83333);
      transform: scale(0.83333); }

  .wave.depth-80 {
    bottom: 0px;
    margin: 0px 0px;
    background-size: 480px 192px;
    height: 192px; }
    .wave.depth-80:after {
      height: 48px; }

  .rope.depth-80 {
    top: -3.33333%; }
    .rope.depth-80 .hanger {
      -webkit-transform: scale(0.88889);
      -moz-transform: scale(0.88889);
      transform: scale(0.88889); }

  .wave.depth-90 {
    bottom: -30px;
    margin: 0px 0px;
    background-size: 540px 216px;
    height: 216px; }
    .wave.depth-90:after {
      height: 24px; }

  .rope.depth-90 {
    top: -6.66667%; }
    .rope.depth-90 .hanger {
      -webkit-transform: scale(0.94444);
      -moz-transform: scale(0.94444);
      transform: scale(0.94444); }

  .wave.depth-100 {
    bottom: -60px;
    margin: 0px 0px;
    background-size: 600px 240px;
    height: 240px; }
    .wave.depth-100:after {
      height: 0px; }

  .rope.depth-100 {
    top: -10%; }
    .rope.depth-100 .hanger {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      transform: scale(1); } }
@media all and (min-width: 900px) {
  html {
    font-size: 15px; }

  .center {
    max-width: 560px; }

  .about .panel:after {
    background-size: 280px 280px;
    height: 200px;
    width: 160px; }
  .about .panel header:before {
    background-size: 82.5px 112.5px; }
  .about .panel .links a {
    padding: 1.2em 0 1.3em; }

  .toggle {
    margin: -28px;
    bottom: 12%; }

  .title {
    font-size: 3.46667em; }

  .background {
    bottom: 160px; }

  .lighthouse {
    margin: 0px -104px;
    background-size: 208px 364px;
    height: 364px;
    width: 208px;
    bottom: 128px; }

  .light {
    margin: -160px -160px;
    background-size: 320px 320px;
    height: 320px;
    width: 320px; }
    .light.a {
      bottom: 112px;
      left: 15%; }
    .light.b {
      bottom: 160px; }
    .light.c {
      bottom: 208px; }
    .light.d {
      bottom: 176px; }
    .light.e {
      bottom: 208px; }
    .light.f {
      bottom: 128px;
      left: 85%; }

  .wave.depth-10 {
    bottom: 238px;
    margin: 0px 0px;
    background-size: 68px 27.2px;
    height: 27px; }
    .wave.depth-10:after {
      height: 244.8px; }

  .rope.depth-10 {
    top: 10%; }
    .rope.depth-10 .hanger {
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      transform: scale(0.5); }

  .wave.depth-20 {
    bottom: 204px;
    margin: 0px 0px;
    background-size: 136px 54.4px;
    height: 54px; }
    .wave.depth-20:after {
      height: 217.6px; }

  .rope.depth-20 {
    top: 6.66667%; }
    .rope.depth-20 .hanger {
      -webkit-transform: scale(0.56111);
      -moz-transform: scale(0.56111);
      transform: scale(0.56111); }

  .wave.depth-30 {
    bottom: 170px;
    margin: 0px 0px;
    background-size: 204px 81.6px;
    height: 82px; }
    .wave.depth-30:after {
      height: 190.4px; }

  .rope.depth-30 {
    top: 3.33333%; }
    .rope.depth-30 .hanger {
      -webkit-transform: scale(0.62222);
      -moz-transform: scale(0.62222);
      transform: scale(0.62222); }

  .wave.depth-40 {
    bottom: 136px;
    margin: 0px 0px;
    background-size: 272px 108.8px;
    height: 109px; }
    .wave.depth-40:after {
      height: 163.2px; }

  .rope.depth-40 {
    top: 0.0%; }
    .rope.depth-40 .hanger {
      -webkit-transform: scale(0.68333);
      -moz-transform: scale(0.68333);
      transform: scale(0.68333); }

  .wave.depth-50 {
    bottom: 102px;
    margin: 0px 0px;
    background-size: 340px 136px;
    height: 136px; }
    .wave.depth-50:after {
      height: 136px; }

  .rope.depth-50 {
    top: -3.33333%; }
    .rope.depth-50 .hanger {
      -webkit-transform: scale(0.74444);
      -moz-transform: scale(0.74444);
      transform: scale(0.74444); }

  .wave.depth-60 {
    bottom: 68px;
    margin: 0px 0px;
    background-size: 408px 163.2px;
    height: 163px; }
    .wave.depth-60:after {
      height: 108.8px; }

  .rope.depth-60 {
    top: -6.66667%; }
    .rope.depth-60 .hanger {
      -webkit-transform: scale(0.80556);
      -moz-transform: scale(0.80556);
      transform: scale(0.80556); }

  .wave.depth-70 {
    bottom: 34px;
    margin: 0px 0px;
    background-size: 476.0px 190.4px;
    height: 190px; }
    .wave.depth-70:after {
      height: 81.6px; }

  .rope.depth-70 {
    top: -10.0%; }
    .rope.depth-70 .hanger {
      -webkit-transform: scale(0.86667);
      -moz-transform: scale(0.86667);
      transform: scale(0.86667); }

  .wave.depth-80 {
    bottom: 0px;
    margin: 0px 0px;
    background-size: 544px 217.6px;
    height: 218px; }
    .wave.depth-80:after {
      height: 54.4px; }

  .rope.depth-80 {
    top: -13.33333%; }
    .rope.depth-80 .hanger {
      -webkit-transform: scale(0.92778);
      -moz-transform: scale(0.92778);
      transform: scale(0.92778); }

  .wave.depth-90 {
    bottom: -34px;
    margin: 0px 0px;
    background-size: 612px 244.8px;
    height: 245px; }
    .wave.depth-90:after {
      height: 27.2px; }

  .rope.depth-90 {
    top: -16.66667%; }
    .rope.depth-90 .hanger {
      -webkit-transform: scale(0.98889);
      -moz-transform: scale(0.98889);
      transform: scale(0.98889); }

  .wave.depth-100 {
    bottom: -68px;
    margin: 0px 0px;
    background-size: 680px 272px;
    height: 272px; }
    .wave.depth-100:after {
      height: 0px; }

  .rope.depth-100 {
    top: -20%; }
    .rope.depth-100 .hanger {
      -webkit-transform: scale(1.05);
      -moz-transform: scale(1.05);
      transform: scale(1.05); } }
@media all and (min-width: 1200px) {
  html {
    font-size: 16px; }

  .center {
    max-width: 620px; }

  .about .panel:after {
    background-size: 280px 280px;
    height: 200px;
    width: 170px; }
  .about .panel header:before {
    background-size: 93.5px 127.5px; }

  .prompt .panel {
    width: 240px; }

  .lighthouse {
    margin: 0px -112px;
    background-size: 224px 392px;
    height: 392px;
    width: 224px; }

  .light {
    margin: -200px -200px;
    background-size: 400px 400px;
    height: 400px;
    width: 400px; }

  .wave.depth-10 {
    bottom: 252px;
    margin: 0px 0px;
    background-size: 72px 28.8px;
    height: 29px; }
    .wave.depth-10:after {
      height: 259.2px; }

  .rope.depth-10 {
    top: 5%; }
    .rope.depth-10 .hanger {
      -webkit-transform: scale(0.6);
      -moz-transform: scale(0.6);
      transform: scale(0.6); }

  .wave.depth-20 {
    bottom: 216px;
    margin: 0px 0px;
    background-size: 144px 57.6px;
    height: 58px; }
    .wave.depth-20:after {
      height: 230.4px; }

  .rope.depth-20 {
    top: 1.66667%; }
    .rope.depth-20 .hanger {
      -webkit-transform: scale(0.67778);
      -moz-transform: scale(0.67778);
      transform: scale(0.67778); }

  .wave.depth-30 {
    bottom: 180px;
    margin: 0px 0px;
    background-size: 216px 86.4px;
    height: 86px; }
    .wave.depth-30:after {
      height: 201.6px; }

  .rope.depth-30 {
    top: -1.66667%; }
    .rope.depth-30 .hanger {
      -webkit-transform: scale(0.75556);
      -moz-transform: scale(0.75556);
      transform: scale(0.75556); }

  .wave.depth-40 {
    bottom: 144px;
    margin: 0px 0px;
    background-size: 288px 115.2px;
    height: 115px; }
    .wave.depth-40:after {
      height: 172.8px; }

  .rope.depth-40 {
    top: -5.0%; }
    .rope.depth-40 .hanger {
      -webkit-transform: scale(0.83333);
      -moz-transform: scale(0.83333);
      transform: scale(0.83333); }

  .wave.depth-50 {
    bottom: 108px;
    margin: 0px 0px;
    background-size: 360px 144px;
    height: 144px; }
    .wave.depth-50:after {
      height: 144px; }

  .rope.depth-50 {
    top: -8.33333%; }
    .rope.depth-50 .hanger {
      -webkit-transform: scale(0.91111);
      -moz-transform: scale(0.91111);
      transform: scale(0.91111); }

  .wave.depth-60 {
    bottom: 72px;
    margin: 0px 0px;
    background-size: 432px 172.8px;
    height: 173px; }
    .wave.depth-60:after {
      height: 115.2px; }

  .rope.depth-60 {
    top: -11.66667%; }
    .rope.depth-60 .hanger {
      -webkit-transform: scale(0.98889);
      -moz-transform: scale(0.98889);
      transform: scale(0.98889); }

  .wave.depth-70 {
    bottom: 36px;
    margin: 0px 0px;
    background-size: 504.0px 201.6px;
    height: 202px; }
    .wave.depth-70:after {
      height: 86.4px; }

  .rope.depth-70 {
    top: -15.0%; }
    .rope.depth-70 .hanger {
      -webkit-transform: scale(1.06667);
      -moz-transform: scale(1.06667);
      transform: scale(1.06667); }

  .wave.depth-80 {
    bottom: 0px;
    margin: 0px 0px;
    background-size: 576px 230.4px;
    height: 230px; }
    .wave.depth-80:after {
      height: 57.6px; }

  .rope.depth-80 {
    top: -18.33333%; }
    .rope.depth-80 .hanger {
      -webkit-transform: scale(1.14444);
      -moz-transform: scale(1.14444);
      transform: scale(1.14444); }

  .wave.depth-90 {
    bottom: -36px;
    margin: 0px 0px;
    background-size: 648px 259.2px;
    height: 259px; }
    .wave.depth-90:after {
      height: 28.8px; }

  .rope.depth-90 {
    top: -21.66667%; }
    .rope.depth-90 .hanger {
      -webkit-transform: scale(1.22222);
      -moz-transform: scale(1.22222);
      transform: scale(1.22222); }

  .wave.depth-100 {
    bottom: -72px;
    margin: 0px 0px;
    background-size: 720px 288px;
    height: 288px; }
    .wave.depth-100:after {
      height: 0px; }

  .rope.depth-100 {
    top: -25%; }
    .rope.depth-100 .hanger {
      -webkit-transform: scale(1.3);
      -moz-transform: scale(1.3);
      transform: scale(1.3); } }
a, button {
  -webkit-transition: color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }

.cross, .x, .y {
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }

.about .panel,
.about .cables {
  -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); }

@-webkit-keyframes phase {
  0% {
    opacity: 1; }

  25% {
    opacity: 0.4; }

  50% {
    opacity: 0.8; }

  75% {
    opacity: 0.4; }

  100% {
    opacity: 1; } }

@-moz-keyframes phase {
  0% {
    opacity: 1; }

  25% {
    opacity: 0.4; }

  50% {
    opacity: 0.8; }

  75% {
    opacity: 0.4; }

  100% {
    opacity: 1; } }

@-ms-keyframes phase {
  0% {
    opacity: 1; }

  25% {
    opacity: 0.4; }

  50% {
    opacity: 0.8; }

  75% {
    opacity: 0.4; }

  100% {
    opacity: 1; } }

@keyframes phase {
  0% {
    opacity: 1; }

  25% {
    opacity: 0.4; }

  50% {
    opacity: 0.8; }

  75% {
    opacity: 0.4; }

  100% {
    opacity: 1; } }

@-webkit-keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg); }

  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg); }

  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg); }

  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg); }

  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg); } }

@-moz-keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg); }

  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg); }

  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg); }

  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg); }

  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg); } }

@-ms-keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg); }

  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg); }

  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg); }

  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg); }

  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg); } }

@keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg); }

  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg); }

  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg); }

  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg); }

  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg); } }

@-webkit-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }

  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }

@-moz-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }

  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }

@-ms-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }

  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }

@keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }

  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }

@-webkit-keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }

  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }

@-moz-keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }

  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }

@-ms-keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }

  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }

@keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(15%,0,0) rotateZ(10deg);
    -moz-transform: translate3d(15%,0,0) rotateZ(10deg);
    transform: translate3d(15%,0,0) rotateZ(10deg); }

  100% {
    -webkit-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    -moz-transform: translate3d(-15%,0,0) rotateZ(-10deg);
    transform: translate3d(-15%,0,0) rotateZ(-10deg); } }

@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }

  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }

@-moz-keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }

  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }

@-ms-keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }

  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }

@keyframes swing {
  0% {
    -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
    transform: rotateZ(10deg); }

  100% {
    -webkit-transform: rotateZ(-10deg);
    -moz-transform: rotateZ(-10deg);
    transform: rotateZ(-10deg); } }

Parallax.js JS Codes

//project url https://github.com/wagerfield/parallax/
//full demo https://wagerfield.github.io/parallax/

// Pretty simple huh?
	var scene = document.getElementById('scene');
	var parallax = new Parallax(scene);

//============================================================
//
// The MIT License
//
// Copyright (C) 2013 Matthew Wagerfield - @mwagerfield
//
// Permission is hereby granted, free of charge, to any
// person obtaining a copy of this software and associated
// documentation files (the "Software"), to deal in the
// Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute,
// sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do
// so, subject to the following conditions:
//
// The above copyright notice and this permission notice
// shall be included in all copies or substantial portions
// of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY
// OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
// LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
// EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
// FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
// AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
// OR OTHER DEALINGS IN THE SOFTWARE.
//
//============================================================

/**
 * Parallax.js
 * @author Matthew Wagerfield - @mwagerfield
 * @description Creates a parallax effect between an array of layers,
 *              driving the motion from the gyroscope output of a smartdevice.
 *              If no gyroscope is available, the cursor position is used.
 */
;(function(window, document, undefined) {

  var NAME = 'Parallax';
  var MAGIC_NUMBER = 30;
  var DEFAULTS = {
    calibrationThreshold: 100,
    calibrationDelay: 500,
    supportDelay: 500,
    calibrateX: false,
    calibrateY: true,
    invertX: true,
    invertY: true,
    limitX: false,
    limitY: false,
    scalarX: 10.0,
    scalarY: 10.0,
    frictionX: 0.1,
    frictionY: 0.1
  };

  function Parallax(element, options) {

    // DOM Context
    this.element = element;
    this.layers = element.getElementsByClassName('layer');

    // Data Extraction
    var data = {
      calibrateX: this.data(this.element, 'calibrate-x'),
      calibrateY: this.data(this.element, 'calibrate-y'),
      invertX: this.data(this.element, 'invert-x'),
      invertY: this.data(this.element, 'invert-y'),
      limitX: this.data(this.element, 'limit-x'),
      limitY: this.data(this.element, 'limit-y'),
      scalarX: this.data(this.element, 'scalar-x'),
      scalarY: this.data(this.element, 'scalar-y'),
      frictionX: this.data(this.element, 'friction-x'),
      frictionY: this.data(this.element, 'friction-y')
    };

    // Delete Null Data Values
    for (var key in data) {
      if (data[key] === null) delete data[key];
    }

    // Compose Settings Object
    this.extend(this, DEFAULTS, options, data);

    // States
    this.calibrationTimer = null;
    this.calibrationFlag = true;
    this.enabled = false;
    this.depths = [];
    this.raf = null;

    // Offset
    this.ox = 0;
    this.oy = 0;
    this.ow = 0;
    this.oh = 0;

    // Calibration
    this.cx = 0;
    this.cy = 0;

    // Input
    this.ix = 0;
    this.iy = 0;

    // Motion
    this.mx = 0;
    this.my = 0;

    // Velocity
    this.vx = 0;
    this.vy = 0;

    // Callbacks
    this.onMouseMove = this.onMouseMove.bind(this);
    this.onDeviceOrientation = this.onDeviceOrientation.bind(this);
    this.onOrientationTimer = this.onOrientationTimer.bind(this);
    this.onCalibrationTimer = this.onCalibrationTimer.bind(this);
    this.onAnimationFrame = this.onAnimationFrame.bind(this);
    this.onWindowResize = this.onWindowResize.bind(this);

    // Initialise
    this.initialise();
  }

  Parallax.prototype.extend = function() {
    if (arguments.length > 1) {
      var master = arguments[0];
      for (var i = 1, l = arguments.length; i < l; i++) {
        var object = arguments[i];
        for (var key in object) {
          master[key] = object[key];
        }
      }
    }
  };

  Parallax.prototype.data = function(element, name) {
    return this.deserialize(element.getAttribute('data-'+name));
  };

  Parallax.prototype.deserialize = function(value) {
    if (value === "true") {
      return true;
    } else if (value === "false") {
      return false;
    } else if (value === "null") {
      return null;
    } else if (!isNaN(parseFloat(value)) && isFinite(value)) {
      return parseFloat(value);
    } else {
      return value;
    }
  };

  Parallax.prototype.offset = function(element) {
    var x = 0, y = 0;
    while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) {
      x += element.offsetLeft - element.scrollLeft;
      y += element.offsetTop - element.scrollTop;
      element = element.offsetParent;
    }
    return {top:y, left:x};
  };

  Parallax.prototype.camelCase = function(value) {
    return value.replace(/-+(.)?/g, function(match, character){
      return character ? character.toUpperCase() : '';
    });
  };

  Parallax.prototype.transformSupport = function(value) {
    var element = document.createElement('div');
    var propertySupport = false;
    var propertyValue = null;
    var featureSupport = false;
    var cssProperty = null;
    var jsProperty = null;
    for (var i = 0, l = this.vendors.length; i < l; i++) {
      if (this.vendors[i] !== null) {
        cssProperty = this.vendors[i][0] + 'transform';
        jsProperty = this.vendors[i][1] + 'Transform';
      } else {
        cssProperty = 'transform';
        jsProperty = 'transform';
      }
      if (element.style[jsProperty] !== undefined) {
        propertySupport = true;
        break;
      }
    }
    switch(value) {
      case '2D':
        featureSupport = propertySupport;
        break;
      case '3D':
        if (propertySupport) {
          document.body.appendChild(element);
          element.style[jsProperty] = 'translate3d(1px,1px,1px)';
          propertyValue = window.getComputedStyle(element).getPropertyValue(cssProperty);
          featureSupport = propertyValue !== undefined && propertyValue.length > 0 && propertyValue !== "none";
          document.body.removeChild(element);
        }
        break;
    }
    return featureSupport;
  };

  Parallax.prototype.ww = null;
  Parallax.prototype.wh = null;
  Parallax.prototype.hw = null;
  Parallax.prototype.hh = null;
  Parallax.prototype.portrait = null;
  Parallax.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|IEMobile)/);
  Parallax.prototype.vendors = [null,['-webkit-','webkit'],['-moz-','Moz'],['-o-','O'],['-ms-','ms']];
  Parallax.prototype.motionSupport = window.DeviceMotionEvent !== undefined;
  Parallax.prototype.orientationSupport = window.DeviceOrientationEvent !== undefined;
  Parallax.prototype.orientationStatus = 0;
  Parallax.prototype.transform2DSupport = Parallax.prototype.transformSupport('2D');
  Parallax.prototype.transform3DSupport = Parallax.prototype.transformSupport('3D');

  Parallax.prototype.initialise = function() {

    // Configure Context Styles
    if (this.transform3DSupport) this.accelerate(this.element);
    var style = window.getComputedStyle(this.element);
    if (style.getPropertyValue('position') === 'static') {
      this.element.style.position = 'relative';
    }

    // Configure Layer Styles
    for (var i = 0, l = this.layers.length; i < l; i++) {
      var layer = this.layers[i];
      if (this.transform3DSupport) this.accelerate(layer);
      layer.style.position = i ? 'absolute' : 'relative';
      layer.style.display = 'block';
      layer.style.height = '100%';
      layer.style.width = '100%';
      layer.style.left = 0;
      layer.style.top = 0;

      // Cache Layer Depth
      this.depths.push(this.data(layer, 'depth') || 0);
    }

    // Setup
    this.updateDimensions();
    this.enable();
    this.queueCalibration(this.calibrationDelay);
  };

  Parallax.prototype.updateDimensions = function() {

    // Cache Context Dimensions
    this.ox = this.offset(this.element).left;
    this.oy = this.offset(this.element).top;
    this.ow = this.element.offsetWidth;
    this.oh = this.element.offsetHeight;

    // Cache Window Dimensions
    this.ww = window.innerWidth;
    this.wh = window.innerHeight;
    this.hw = this.ww / 2;
    this.hh = this.wh / 2;
  };

  Parallax.prototype.queueCalibration = function(delay) {
    clearTimeout(this.calibrationTimer);
    this.calibrationTimer = setTimeout(this.onCalibrationTimer, delay);
  };

  Parallax.prototype.enable = function() {
    if (!this.enabled) {
      this.enabled = true;
      if (this.orientationSupport) {
        this.portrait = null;
        window.addEventListener('deviceorientation', this.onDeviceOrientation);
        setTimeout(this.onOrientationTimer, this.supportDelay);
      } else {
        this.cx = 0;
        this.cy = 0;
        this.portrait = false;
        window.addEventListener('mousemove', this.onMouseMove);
      }
      window.addEventListener('resize', this.onWindowResize);
      this.raf = requestAnimationFrame(this.onAnimationFrame);
    }
  };

  Parallax.prototype.disable = function() {
    if (this.enabled) {
      this.enabled = false;
      if (this.orientationSupport) {
        window.removeEventListener('deviceorientation', this.onDeviceOrientation);
      } else {
        window.removeEventListener('mousemove', this.onMouseMove);
      }
      window.removeEventListener('resize', this.onWindowResize);
      cancelAnimationFrame(this.raf);
    }
  };

  Parallax.prototype.calibrate = function(x, y) {
    this.calibrateX = x === undefined ? this.calibrateX : x;
    this.calibrateY = y === undefined ? this.calibrateY : y;
  };

  Parallax.prototype.invert = function(x, y) {
    this.invertX = x === undefined ? this.invertX : x;
    this.invertY = y === undefined ? this.invertY : y;
  };

  Parallax.prototype.friction = function(x, y) {
    this.frictionX = x === undefined ? this.frictionX : x;
    this.frictionY = y === undefined ? this.frictionY : y;
  };

  Parallax.prototype.scalar = function(x, y) {
    this.scalarX = x === undefined ? this.scalarX : x;
    this.scalarY = y === undefined ? this.scalarY : y;
  };

  Parallax.prototype.limit = function(x, y) {
    this.limitX = x === undefined ? this.limitX : x;
    this.limitY = y === undefined ? this.limitY : y;
  };

  Parallax.prototype.clamp = function(value, min, max) {
    value = Math.max(value, min);
    value = Math.min(value, max);
    return value;
  };

  Parallax.prototype.css = function(element, property, value) {
    var jsProperty = null;
    for (var i = 0, l = this.vendors.length; i < l; i++) {
      if (this.vendors[i] !== null) {
        jsProperty = this.camelCase(this.vendors[i][1] + '-' + property);
      } else {
        jsProperty = property;
      }
      if (element.style[jsProperty] !== undefined) {
        element.style[jsProperty] = value;
        break;
      }
    }
  };

  Parallax.prototype.accelerate = function(element) {
    this.css(element, 'transform', 'translate3d(0,0,0)');
    this.css(element, 'transform-style', 'preserve-3d');
    this.css(element, 'backface-visibility', 'hidden');
  };

  Parallax.prototype.setPosition = function(element, x, y) {
    x += '%';
    y += '%';
    if (this.transform3DSupport) {
      this.css(element, 'transform', 'translate3d('+x+','+y+',0)');
    } else if (this.transform2DSupport) {
      this.css(element, 'transform', 'translate('+x+','+y+')');
    } else {
      element.style.left = x;
      element.style.top = y;
    }
  };

  Parallax.prototype.onOrientationTimer = function(event) {
    if (this.orientationSupport && this.orientationStatus === 0) {
      this.disable();
      this.orientationSupport = false;
      this.enable();
    }
  };

  Parallax.prototype.onCalibrationTimer = function(event) {
    this.calibrationFlag = true;
  };

  Parallax.prototype.onWindowResize = function(event) {
    this.updateDimensions();
  };

  Parallax.prototype.onAnimationFrame = function() {
    var dx = this.ix - this.cx;
    var dy = this.iy - this.cy;
    if ((Math.abs(dx) > this.calibrationThreshold) || (Math.abs(dy) > this.calibrationThreshold)) {
      this.queueCalibration(0);
    }
    if (this.portrait) {
      this.mx = (this.calibrateX ? dy : this.iy) * this.scalarX;
      this.my = (this.calibrateY ? dx : this.ix) * this.scalarY;
    } else {
      this.mx = (this.calibrateX ? dx : this.ix) * this.scalarX;
      this.my = (this.calibrateY ? dy : this.iy) * this.scalarY;
    }
    if (!isNaN(parseFloat(this.limitX))) {
      this.mx = this.clamp(this.mx, -this.limitX, this.limitX);
    }
    if (!isNaN(parseFloat(this.limitY))) {
      this.my = this.clamp(this.my, -this.limitY, this.limitY);
    }
    this.vx += (this.mx - this.vx) * this.frictionX;
    this.vy += (this.my - this.vy) * this.frictionY;
    for (var i = 0, l = this.layers.length; i < l; i++) {
      var layer = this.layers[i];
      var depth = this.depths[i];
      var xOffset = this.vx * depth * (this.invertX ? -1 : 1);
      var yOffset = this.vy * depth * (this.invertY ? -1 : 1);
      this.setPosition(layer, xOffset, yOffset);
    }
    this.raf = requestAnimationFrame(this.onAnimationFrame);
  };

  Parallax.prototype.onDeviceOrientation = function(event) {

    // Validate environment and event properties.
    if (!this.desktop && event.beta !== null && event.gamma !== null) {

      // Set orientation status.
      this.orientationStatus = 1;

      // Extract Rotation
      var x = (event.beta  || 0) / MAGIC_NUMBER; //  -90 :: 90
      var y = (event.gamma || 0) / MAGIC_NUMBER; // -180 :: 180

      // Detect Orientation Change
      var portrait = this.wh > this.ww;
      if (this.portrait !== portrait) {
        this.portrait = portrait;
        this.calibrationFlag = true;
      }

      // Set Calibration
      if (this.calibrationFlag) {
        this.calibrationFlag = false;
        this.cx = x;
        this.cy = y;
      }

      // Set Input
      this.ix = x;
      this.iy = y;
    }
  };

  Parallax.prototype.onMouseMove = function(event) {

    // Calculate Input
    this.ix = (event.pageX - this.hw) / this.hw;
    this.iy = (event.pageY - this.hh) / this.hh;
  };

  // Expose Parallax
  window[NAME] = Parallax;

})(window, document);

/**
 * Request Animation Frame Polyfill.
 * @author Tino Zijdel
 * @author Paul Irish
 * @see https://gist.github.com/paulirish/1579671
 */
;(function() {

  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];

  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() { callback(currTime + timeToCall); },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  }

  if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
  }

}());
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.