123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
 <!-- 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>
			<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>
			<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"></div></li>
		</ul>
	</div>
  </body>
</html>
            
          
!
            
               <!-- project url https://github.com/wagerfield/parallax/</br> -->
   <!-- full demo https://wagerfield.github.io/parallax/ -->

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


            
          
!
            
              //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);
    };
  }

}());
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console