Parallax.js

Developer
Englishextra
Size
11,997 Kb
Views
10,120
  1. Parallax.js Previews
  2. Parallax.js HTML Codes
  3. Parallax.js CSS Codes
  4. Parallax.js JS Codes

How do I make an 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 17 January 2023, Tuesday.

Parallax.js Previews
IQ Test

Parallax.js - Script Codes 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 - Script Codes 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 - Script Codes 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); }; }
}());
Parallax.js - Script Codes
Parallax.js - Script Codes
Home Page Home
Developer Englishextra
Username englishextra
Uploaded January 17, 2023
Rating 3
Size 11,997 Kb
Views 10,120
Do you need developer help for Parallax.js?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Englishextra (englishextra) Script Codes
Name
Ready-to-Go Three-columns Responsive Typography Template with Off-Canvas Navigation
Responsive CSS3 Columns with Horizontal Scroll
Metro UI Colors Palettes
Timeline Blueprint
Blog Article Template
JSON based picture gallery with lazyloading
Grid 2 Go
QR code generating with vanilla js
CSS angled stripes
Core.css
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!