<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mudrenok/pen/GjaJJj?depth=everything&order=popularity&page=21&q=translate&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Questrial");
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
font-size: 62.5%;
}
body {
background: #eeeeee;
overflow-x: hidden;
font-family: 'Questrial', "Helvetica Neue", Helvetica, sans-serif;
}
.elements {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 35rem;
height: 51rem;
background-color: #fff;
border-radius: 3px;
box-shadow: 0.5rem 1rem 3rem rgba(0, 0, 0, 0.7);
}
.container {
position: relative;
margin: 3rem auto 0;
width: 32rem;
}
.slide {
position: absolute;
height: 31rem;
width: 32rem;
border-radius: 3px;
cursor: -webkit-grab;
cursor: grab;
background-color: gray;
overflow: hidden;
will-change: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.slide1 {
box-shadow: 0.2rem 0.2rem 2.5rem rgba(0, 0, 0, 0.7);
background-image: url("https://i.vimeocdn.com/video/590456190_640x360.jpg");
background-size: 55rem;
}
#paris {
margin-left: -15rem;
}
#italy, #prog {
margin-left: -0rem;
}
#hongkong {
margin-left: -10rem;
}
.index1 {
z-index: 1;
}
.index2 {
z-index: 2;
}
.index3 {
z-index: 3;
}
.index4 {
z-index: 4;
}
.description {
position: absolute;
top: 39rem;
margin: auto 4.2rem;
width: 26.6rem;
}
.description__line {
position: absolute;
top: 3.5rem;
width: 100%;
border-bottom: 1px solid #eeeeee;
}
.description__country, .description__text {
position: absolute;
will-change: transform, opacity;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
-webkit-transition: all 0.25s cubic-bezier(0.74, 0.05, 0.94, 0.36);
transition: all 0.25s cubic-bezier(0.74, 0.05, 0.94, 0.36);
}
.description__country {
width: 100%;
font-size: 2rem;
font-weight: 600;
}
.description__text {
top: 5rem;
font-size: 1.7rem;
font-weight: 300;
color: #aaaaaa;
-webkit-transition-delay: 0.03s;
transition-delay: 0.03s;
}
.description__text.hide {
-webkit-transition-delay: .28s;
transition-delay: .28s;
}
.fadeout-up {
opacity: 0;
-webkit-transform: translate3D(0, -2rem, 0);
transform: translate3D(0, -2rem, 0);
}
.hide {
opacity: 0;
-webkit-transform: translate3D(0, 2rem, 0);
transform: translate3D(0, 2rem, 0);
-webkit-transition: all 0.25s cubic-bezier(0.05, 0.67, 0.47, 0.99);
transition: all 0.25s cubic-bezier(0.05, 0.67, 0.47, 0.99);
-webkit-transition-delay: .25s;
transition-delay: .25s;
}
.fadein-up {
opacity: 1;
-webkit-transform: translate3D(0, 0, 0);
transform: translate3D(0, 0, 0);
}
svg {
width: 3.5rem;
height: 2.3rem;
position: absolute;
right: 0;
top: -0.1rem;
}
</style></head><body>
<div class="elements">
<div class="container">
<div class="slide slide1 index4">
<video id="italy" height="310" autoplay="autoplay" muted="muted" loop="loop" poster="https://i.vimeocdn.com/video/590456190_640x360.jpg">
<source src="//player.vimeo.com/external/181785119.sd.mp4?s=5bb11371ddf8b65207173d68f30ebe9759c60554" type="video/mp4"/>Your browser doesn't support HTML5 video tag.
</video>
</div>
<div class="slide index3">
<video id="paris" height="310" muted="muted" loop="loop" poster="https://i.vimeocdn.com/video/529880565_640x360.jpg">//, controls)
<source src="//player.vimeo.com/external/135710130.sd.mp4?s=16036acc01a6d26d6a64feb4d92afd23" type="video/mp4"/>Your browser doesn't support HTML5 video tag.
</video>
</div>
<div class="slide index2">
<video id="hongkong" height="310" muted="muted" loop="loop" poster="https://i.vimeocdn.com/video/571934523_640x360.jpg">
<source src="//player.vimeo.com/external/167599912.sd.mp4?s=f97f57e9205c9c86f10df25404edba51a8ea0917" type="video/mp4"/>Your browser doesn't support HTML5 video tag.
</video>
</div>
<div class="slide index1">
<video id="prog" height="310" muted="muted" loop="loop" poster="https://i.vimeocdn.com/video/587730046_640x360.jpg">
<source src="//player.vimeo.com/external/179738669.sd.mp4?s=fb42e7e2c8c6ff0d5d0b03dfa6aa8af830019f79" type="video/mp4"/>Your browser doesn't support HTML5 video tag.
</video>
</div>
</div>
<div class="description">
<div class="description__country"><span>La Crusc, Italy</span>
<svg class="italy" viewbox="0 0 35 23">
<rect width="12" height="23" fill="#3D9348"></rect>
<rect x="23" width="12" height="23" fill="#D80031"></rect>
</svg>
</div>
<div class="description__country hide"><span>Paris, France</span>
<svg class="france" viewbox="0 0 35 23">
<rect x="-0.1" width="12" height="23" fill="#323E95"></rect>
<rect x="23" width="12" height="23" fill="#D80031"></rect>
</svg>
</div>
<div class="description__country hide"><span>Hong Kong, China</span>
<svg class="china" viewbox="0 0 35 23">
<g>
<rect width="35" height="23" fill="#CB1D23"></rect>
<polygon points="4,8.9 4.7,6.6 2.8,5.2 5.2,5.2 5.9,2.9 6.7,5.2 9.1,5.2 7.1,6.6 7.8,8.9 5.9,7.5 " fill="#F7DE29"></polygon>
<polygon points="10.7,10.1 11.5,10.4 12,9.8 12,10.6 12.8,11 11.9,11.2 11.9,12 11.4,11.3 10.6,11.5 11.1,10.8 " fill="#F7DE29"></polygon>
<polygon points="15,5.7 14.2,5.6 13.8,6.3 13.6,5.5 12.8,5.3 13.6,4.9 13.4,4.1 14.1,4.7 14.8,4.3 14.4,5.1 " fill="#F7DE29"></polygon>
<polygon points="13.2,9.6 13.5,8.8 12.8,8.3 13.6,8.3 13.9,7.4 14.2,8.3 15.1,8.3 14.4,8.8 14.6,9.6 13.9,9.1 " fill="#F7DE29"></polygon>
<polygon points="10.7,2 11.5,2.4 12.1,1.8 12,2.6 12.8,3 11.9,3.2 11.8,4 11.4,3.3 10.5,3.4 11.1,2.8 " fill="#F7DE29"></polygon>
</g>
</svg>
</div>
<div class="description__country hide"><span>Thx for watching</span>
<svg class="china" viewbox="0 0 35 23"><a xlink:href="https://twitter.com/AntonMudrenok" target="_blank">
<path d="M31.3,2.7c-1,0.5-2.2,0.8-3.3,0.9c1.2-0.7,2.1-1.9,2.6-3.2c-1.1,0.7-2.4,1.1-3.7,1.4C25.8,0.7,24.3,0,22.6,0 c-3.2,0-5.8,2.6-5.8,5.8c0,0.5,0.1,0.9,0.1,1.3C12.1,6.9,7.8,4.6,5,1.1C4.5,1.9,4.2,2.9,4.2,4c0,2,1,3.8,2.6,4.8 c-1,0-1.8-0.3-2.6-0.7c0,0,0,0,0,0.1c0,2.8,2,5.2,4.7,5.7c-0.5,0.1-1,0.2-1.5,0.2c-0.4,0-0.7,0-1.1-0.1c0.7,2.3,2.9,4,5.4,4 c-2,1.6-4.5,2.5-7.2,2.5c-0.5,0-0.9,0-1.4-0.1C5.6,22,8.6,23,11.9,23c10.7,0,16.5-8.8,16.5-16.5c0-0.3,0-0.5,0-0.8 C29.5,4.9,30.5,3.9,31.3,2.7z" fill="#55ACEE"></path></a></svg>
</div>
<div class="description__line"></div>
<div class="description__text"><span>How about you explore cultural events in La Crusc?</span></div>
<div class="description__text hide"><span>How about you explore cultural events in Paris?</span></div>
<div class="description__text hide"><span>How about you explore cultural events in Hong Kong?</span></div>
<div class="description__text hide"><span>More demos soon =)</span></div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script >"use strict";
$(document).ready(function () {
var $videos = [].slice.call(document.querySelectorAll('.slide'));
var $countries = [].slice.call(document.querySelectorAll(".description__country"));
var $texts = [].slice.call(document.querySelectorAll(".description__text"));
var fromTo = function fromTo(from, to) {
var prgrs = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2];
return from + (to - from) * prgrs;
};
var easing = {
inCubic: function inCubic(t, b, c, d) {
// t: current time, b: begInnIng value, c: change In value, d: duration
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (1.7 * tc * ts - 2.05 * ts * ts + 1.5 * tc - 0.2 * ts + 0.05 * t);
}
};
var transforms = {
translate3D: function translate3D() {
var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
var z = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2];
var el = arguments.length <= 3 || arguments[3] === undefined ? "px" : arguments[3];
return "translate3D(" + x + el + ", " + y + el + ", " + z + el + ")";
},
rotate3d: function rotate3d() {
var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
var z = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2];
var deg = arguments.length <= 3 || arguments[3] === undefined ? 0 : arguments[3];
return "rotate3d(" + x + ", " + y + ", " + z + ", " + deg + "deg)";
},
rotate: function rotate() {
var deg = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
return "rotate(" + deg + "deg)";
},
scale: function scale() {
var x = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
var y = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
return "scale(" + x + ", " + y + ")";
},
perspective: function perspective() {
var val = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
var el = arguments.length <= 1 || arguments[1] === undefined ? "px" : arguments[1];
return "perspective(" + val + el + ")";
}
};
var descriptions = {
index: 0,
timeout: 550,
countries: $countries.slice(),
texts: $texts.slice(),
animateDescription: function animateDescription() {
$(this.countries[0]).addClass("fadeout-up");
$(this.countries[1]).addClass("fadein-up");
$(this.texts[0]).addClass("fadeout-up");
$(this.texts[1]).addClass("fadein-up");
},
swapDescription: function swapDescription() {
var shdC = this.countries.shift();
var shdT = this.texts.shift();
var count = $countries.length;
if (count > this.index + 4) {
this.countries.push($countries[this.index + 5]);
this.texts.push($texts[this.index + 5]);
} else {
this.countries.push(shdC);
this.texts.push(shdT);
}
this.index === count ? this.index = 0 : this.index++;
this.initDescriptions();
},
initDescriptions: function initDescriptions() {
var length = this.countries.length;
$(this.countries[0]).removeClass("hide fadein-up");
$(this.countries[length - 1]).addClass("hide").removeClass("fadeout-up");
$(this.texts[0]).removeClass("hide fadein-up");
$(this.texts[length - 1]).addClass("hide").removeClass("fadeout-up");
}
};
var curBlocks = {
blocks: $videos.slice(),
index: 0,
swapBlocks: function swapBlocks() {
var shd = this.blocks.shift();
var count = $videos.length;
if (count > this.index + 4) {
this.blocks.push($videos[this.index + 5]);
} else {
this.blocks.push(shd);
}
this.index === count ? this.index = 0 : this.index++;
initScene();
}
};
var block = {
width: 32,
heigth: 31,
b2scale: 30 / 32,
b3scale: 28 / 32,
upHeigth: 1,
b2caclH: 0,
b3caclH: 0,
interact: false
};
var initScene = function initScene() {
block.b2caclH = block.heigth * (1 - block.b2scale) * (1 / block.b2scale) / 2 + block.upHeigth * (1 / block.b2scale);
block.b3caclH = block.heigth * (1 - block.b3scale) * (1 / block.b3scale) / 2 + block.upHeigth * 2 * (1 / block.b3scale);
curBlocks.blocks[0].style.transform = transforms.translate3D(0, 0, 0, "rem");
curBlocks.blocks[1].style.transform = transforms.scale(block.b2scale, block.b2scale) + transforms.translate3D(0, block.b2caclH, 0, "rem");
curBlocks.blocks[2].style.transform = transforms.scale(block.b3scale, block.b3scale) + transforms.translate3D(0, block.b3caclH, 0, "rem");
curBlocks.blocks[3].style.transform = transforms.scale(block.b3scale, block.b3scale);
curBlocks.blocks[0].style.opacity = 1;
curBlocks.blocks[1].style.opacity = 0.1;
curBlocks.blocks[2].style.opacity = 0.03;
curBlocks.blocks[3].style.opacity = 0;
curBlocks.blocks[0].className = "slide slide1 index4";
curBlocks.blocks[1].className = "slide index3";
curBlocks.blocks[2].className = "slide index2";
curBlocks.blocks[3].className = "slide index1";
bindDrag();
};
initScene();
var drag = {
degree: 2.7,
upHeight: 1.5,
maxDrag: 75,
b2scale: 0.98,
b3scale: 0.95,
dx: 0,
frameBusy: false,
helloSafari: 2.9 // need to add this coz of strange behavior
};
var dragBlock = function dragBlock() {
var maxStep = drag.maxDrag;
var curStep = drag.dx;
if (curStep > maxStep) curStep = maxStep;
if (curStep < -maxStep) curStep = -maxStep;
var progress = curStep / maxStep;
var curDeg = drag.degree * progress;
var curUpLen = drag.upHeight * Math.abs(curStep) / maxStep;
var curScaleBlock2 = drag.b2scale + (1 - drag.b2scale) * (maxStep - curStep) / maxStep;
var curScaleBlock3 = drag.b3scale + (1 - drag.b3scale) * (maxStep - curStep) / maxStep;
curBlocks.blocks[0].style.transform = transforms.perspective(220, "rem") + transforms.rotate(curDeg) + transforms.rotate3d(1, 1, 0, curDeg * 3) + transforms.translate3D(0, -curUpLen, 0, "rem");
curBlocks.blocks[1].style.transform = transforms.scale(block.b2scale * curScaleBlock2, block.b2scale * curScaleBlock2) + transforms.translate3D(0, block.b2caclH - curUpLen / 4, 0, "rem") + transforms.rotate(curDeg / 3) + transforms.rotate3d(1, 1, 0, curDeg * drag.helloSafari);
curBlocks.blocks[2].style.transform = transforms.scale(block.b3scale * curScaleBlock3, block.b3scale * curScaleBlock3) + transforms.translate3D(0, block.b3caclH + curUpLen / 1.5, 0, "rem") + transforms.rotate(-curDeg) + transforms.rotate3d(1, 1, 0, curDeg * drag.helloSafari);
curBlocks.blocks[0].style.opacity = 1;
curBlocks.blocks[1].style.opacity = fromTo(0.1, 0.7, progress);
curBlocks.blocks[2].style.opacity = fromTo(0.03, 0.07, progress);
curBlocks.blocks[3].style.opacity = 0;
drag.frameBusy = false;
};
var throwing = {
animating: false,
curStep: 0,
maxStep: 15
};
var throwBlock = function throwBlock() {
if (++throwing.curStep > throwing.maxStep) {
$(document).off("mousedown touchstart");
throwing.curStep = 0;
drag.dx = 0;
curBlocks.blocks[0].children[0].pause();
curBlocks.swapBlocks();
return;
}
var progress = easing.inCubic(throwing.curStep, 0, 1, throwing.maxStep);
var delta = easing.inCubic(throwing.curStep, 0, 1, throwing.maxStep) * 40;
curBlocks.blocks[0].style.transform = transforms.rotate(drag.degree + delta / 2) + transforms.rotate3d(1, 1, 0, drag.degree * 3) + transforms.translate3D(delta, -drag.upHeight - delta / 1.2, 0, "rem");
var b2Scale = fromTo(block.b2scale * drag.b2scale, 1, progress);
var b2TransY = fromTo(block.b2caclH - drag.upHeight / 4, 0, progress);
var b2Rot = fromTo(drag.degree / 3, 0, progress);
curBlocks.blocks[1].style.transform = transforms.scale(b2Scale, b2Scale) + transforms.translate3D(0, b2TransY, 0, "rem") + transforms.rotate(b2Rot) + transforms.rotate3d(1, 1, 0, drag.degree * drag.helloSafari);
var b3Scale = fromTo(block.b3scale * drag.b3scale, block.b2scale, progress);
var b3TransY = fromTo(block.b3caclH + drag.upHeight / 1.5, block.b2caclH, progress);
var b3Rot = fromTo(-drag.degree, 0, progress);
curBlocks.blocks[2].style.transform = transforms.scale(b3Scale, b3Scale) + transforms.translate3D(0, b3TransY, 0, "rem") + transforms.rotate(b3Rot) + transforms.rotate3d(1, 1, 0, drag.degree * drag.helloSafari);
curBlocks.blocks[3].style.transform = transforms.scale(block.b3scale, block.b3scale) + transforms.translate3D(0, fromTo(0, block.b3caclH, progress), 0, "rem");
curBlocks.blocks[0].style.opacity = fromTo(1, 0.5, progress);
curBlocks.blocks[1].style.opacity = fromTo(0.7, 1, progress);
curBlocks.blocks[2].style.opacity = fromTo(0.07, 0.1, progress);
curBlocks.blocks[3].style.opacity = fromTo(0, 0.03, progress);
requestAnimationFrame(throwBlock);
};
function bindDrag() {
$(document).on("mousedown touchstart", ".slide1", function (e) {
var startX = e.pageX || e.originalEvent.touches[0].pageX;
var startY = e.pageY || e.originalEvent.touches[0].pageY;
block.interact = true;
$(document).on("mousemove touchmove", function (e) {
var curX = e.pageX || e.originalEvent.touches[0].pageX;
var curY = e.pageY || e.originalEvent.touches[0].pageY;
if (curX - startX <= 0) curX = startX;
if (curY - startY >= 0) curY = startY;
drag.dx = Math.sqrt(Math.pow(curX - startX, 2) + Math.pow(curY - startY, 2));
if (!drag.dx) return;
if (drag.frameBusy) return;
drag.frameBusy = true;
requestAnimationFrame(dragBlock);
});
$(document).on("mouseup touchend", function (e) {
$(document).off("mousemove touchmove mouseup touchend");
if (Math.abs(drag.dx) < drag.maxDrag) {
drag.dx = 0;
requestAnimationFrame(dragBlock);
} else {
descriptions.animateDescription();
setTimeout(descriptions.swapDescription.bind(descriptions), descriptions.timeout);
curBlocks.blocks[1].children[0].play();
requestAnimationFrame(throwBlock);
}
});
});
};
(function prevAnimation() {
var initDel = 500;
var frames = drag.maxDrag;
var spd = 15;
var _loop = function _loop(i) {
setTimeout(function () {
if (!block.interact) {
drag.dx = i;
if (drag.frameBusy) return;
requestAnimationFrame(dragBlock);
}
}, initDel + spd * i);
};
for (var i = 1; i < frames; i++) {
_loop(i);
}
var _loop2 = function _loop2(i) {
setTimeout(function () {
if (!block.interact) {
drag.dx = i;
if (drag.frameBusy) return;
requestAnimationFrame(dragBlock);
}
}, initDel + spd * (frames * 2 + 1 - i));
};
for (var i = frames; i >= 0; i--) {
_loop2(i);
}
})();
});
//# sourceURL=pen.js
</script>
</body></html>
