<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/yusufbkr/pen/JdBxpj?depth=everything&order=popularity&page=40&q=translate&show_forks=false" />
<style class="cp-pen-styles">.phoneBox,
.phoneBox .phoneInfo,
.phoneBox header,
.phoneBox .phoneSingle {
position: relative;
float: left;
width: 100%;
}
.phoneBox {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.phoneBox .phoneInfo {
height: 20px;
overflow: hidden;
}
.phoneBox header {
height: 70px;
overflow: hidden;
}
.phoneBox .materialButton {
width: 60px;
height: 60px;
background: #FC4B6B;
border-radius: 50%;
position: absolute;
right: 30px;
top: 60px;
z-index: 2;
cursor: pointer;
}
.phoneBox .materialButton:before,
.phoneBox .materialButton:after {
content: "";
background: #fff;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
transition: 200ms cubic-bezier(.4, 0, .2, 1);
-webkit-transition: 200ms cubic-bezier(.4, 0, .2, 1);
-ms-transition: 200ms cubic-bezier(.4, 0, .2, 1);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.phoneBox .materialButton.active:before,
.phoneBox .materialButton.active:after {
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%);
}
.phoneBox .materialButton:before {
width: 15px;
height: 3px;
}
.phoneBox .materialButton:after {
width: 3px;
height: 15px;
}
.phoneBox .materialButton .scale {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.phoneBox .materialButton .scale:before {
content: "";
width: 60px;
height: 60px;
background: #FC4B6B;
border-radius: 50%;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.phoneBox .materialButton .scale .scaleColor {
width: 25px;
height: 0px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
position: absolute;
top: 50%;
left: 50%;
margin-top: -0px;
margin-left: -12.5px;
border-radius: 25px;
transition: 200ms cubic-bezier(.4, 0, .2, 1);
-webkit-transition: 200ms cubic-bezier(.4, 0, .2, 1);
-ms-transition: 200ms cubic-bezier(.4, 0, .2, 1);
transform: rotate(0deg) translate(0px, 50%);
-webkit-transform: rotate(0deg) translate(0px, 50%);
-ms-transform: rotate(0deg) translate(0px, 50%);
}
.phoneBox .materialButton .scale .scaleColor:hover {
height: 55px !important;
margin-top: -27.5px !important;
}
.phoneBox .materialButton .scale .scaleColor:nth-child(1) {
transform: rotate(90deg) translate(0px, 50%);
-webkit-transform: rotate(90deg) translate(0px, 50%);
-ms-transform: rotate(90deg) translate(0px, 50%);
background: #F44336;
}
.phoneBox .materialButton .scale .scaleColor:nth-child(2) {
transform: rotate(135deg) translate(0px, 50%);
-webkit-transform: rotate(135deg) translate(0px, 50%);
-ms-transform: rotate(135deg) translate(0px, 50%);
background: #9C27B0;
}
.phoneBox .materialButton .scale .scaleColor:nth-child(3) {
transform: rotate(180deg) translate(0px, 50%);
-webkit-transform: rotate(180deg) translate(0px, 50%);
-ms-transform: rotate(180deg) translate(0px, 50%);
background: #3F51B5;
}
.phoneBox .materialButton .scale .scaleColor:nth-child(4) {
transform: rotate(225deg) translate(0px, 50%);
-webkit-transform: rotate(225deg) translate(0px, 50%);
-ms-transform: rotate(225deg) translate(0px, 50%);
background: #03A9F4;
}
.phoneBox .materialButton .scale .scaleColor:nth-child(5) {
transform: rotate(270deg) translate(0px, 50%);
-webkit-transform: rotate(270deg) translate(0px, 50%);
-ms-transform: rotate(270deg) translate(0px, 50%);
background: #009688;
}
.phoneBox .materialButton .scale .scaleColor:nth-child(6) {
transform: rotate(315deg) translate(0px, 50%);
-webkit-transform: rotate(315deg) translate(0px, 50%);
-ms-transform: rotate(315deg) translate(0px, 50%);
background: #8BC34A;
}
.phoneBox .materialButton .scale .scaleColor:nth-child(7) {
transform: rotate(360deg) translate(0px, 50%);
-webkit-transform: rotate(360deg) translate(0px, 50%);
-ms-transform: rotate(360deg) translate(0px, 50%);
background: #FFEB3B;
}
.phoneBox .materialButton .scale .scaleColor:nth-child(8) {
transform: rotate(405deg) translate(0px, 50%);
-webkit-transform: rotate(405deg) translate(0px, 50%);
-ms-transform: rotate(405deg) translate(0px, 50%);
background: #FF9800;
}
.phoneBox .phoneSingle {
background: #fff;
}
.box-color {
width: 60px;
height: 60px;
position: absolute;
border-radius: 50%;
}
.color {
width: 0px;
height: 0px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.color.first-active {
width: 5000px;
height: 5000px;
}
.color.active {
z-index: 2;
}
.color.body-color-1 {
background: #E57373;
}
.color.phoneInfo-color-1 {
background: #D32F2F;
}
.color.header-color-1 {
background: #F44336;
}
.color.body-color-2 {
background: #BA68C8;
}
.color.phoneInfo-color-2 {
background: #7B1FA2;
}
.color.header-color-2 {
background: #9C27B0;
}
.color.body-color-3 {
background: #7986CB;
}
.color.phoneInfo-color-3 {
background: #303F9F;
}
.color.header-color-3 {
background: #3F51B5;
}
.color.body-color-4 {
background: #4FC3F7;
}
.color.phoneInfo-color-4 {
background: #0288D1;
}
.color.header-color-4 {
background: #03A9F4;
}
.color.body-color-5 {
background: #4DB6AC;
}
.color.phoneInfo-color-5 {
background: #00796B;
}
.color.header-color-5 {
background: #009688;
}
.color.body-color-6 {
background: #AED581;
}
.color.phoneInfo-color-6 {
background: #689F38;
}
.color.header-color-6 {
background: #8BC34A;
}
.color.body-color-7 {
background: #FFF176;
}
.color.phoneInfo-color-7 {
background: #FBC02D;
}
.color.header-color-7 {
background: #FFEB3B;
}
.color.body-color-8 {
background: #FFB74D;
}
.color.phoneInfo-color-8 {
background: #F57C00;
}
.color.header-color-8 {
background: #FF9800;
}
.materialContainer {
width: 100%;
max-width: 380px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 10;
}
.row {
margin: 0 -20px;
}
html,
body {
overflow: hidden;
}
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
outline: none;
}</style></head><body>
<div class="body-colors box-color">
<div class="color body-color-1 first-active"></div>
<div class="color body-color-2"></div>
<div class="color body-color-3"></div>
<div class="color body-color-4"></div>
<div class="color body-color-5"></div>
<div class="color body-color-6"></div>
<div class="color body-color-7"></div>
<div class="color body-color-8"></div>
</div>
<div class="materialContainer">
<div class="phoneBox">
<div class="phoneInfo">
<div class="phoneInfo-colors box-color">
<div class="color phoneInfo-color-1 first-active"></div>
<div class="color phoneInfo-color-2"></div>
<div class="color phoneInfo-color-3"></div>
<div class="color phoneInfo-color-4"></div>
<div class="color phoneInfo-color-5"></div>
<div class="color phoneInfo-color-6"></div>
<div class="color phoneInfo-color-7"></div>
<div class="color phoneInfo-color-8"></div>
</div>
</div>
<header>
<div class="header-colors box-color">
<div class="color header-color-1 first-active"></div>
<div class="color header-color-2"></div>
<div class="color header-color-3"></div>
<div class="color header-color-4"></div>
<div class="color header-color-5"></div>
<div class="color header-color-6"></div>
<div class="color header-color-7"></div>
<div class="color header-color-8"></div>
</div>
</header>
<div class="phoneSingle"></div>
<div class="materialButton">
<div class="scale">
<div class="scaleColor"></div>
<div class="scaleColor"></div>
<div class="scaleColor"></div>
<div class="scaleColor"></div>
<div class="scaleColor"></div>
<div class="scaleColor"></div>
<div class="scaleColor"></div>
<div class="scaleColor"></div>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >$(function() {
$(window).resize(function() {
$(".phoneBox .phoneSingle").height(parseInt(($(window).height() / 100) * 70))
});
$(".phoneBox .phoneSingle").height(parseInt(($(window).height() / 100) * 70))
$(".body-colors").css({
"top": $(".materialButton").offset().top + "px",
"left": $(".materialButton").offset().left + "px"
})
$(".phoneInfo-colors,.header-colors").each(function() {
var top = $(".materialButton").offset().top - $(this).offset().top,
left = $(".materialButton").offset().left - $(this).offset().left;
$(this).css({
"top": top + "px",
"left": left + "px"
})
});
$(".materialButton").click(function() {
if ($(".phoneBox .materialButton").hasClass('active')) {
$(".phoneBox .materialButton").removeClass('active')
for (var i = 1; i < 9; i++) {if (window.CP.shouldStopExecution(1)){break;}
$(".phoneBox .materialButton .scale .scaleColor:nth-child(" + i + ")").delay((i * 50) - 100).animate({
height: 0,
marginTop: -0
}, 300);
}
window.CP.exitedLoop(1);
} else {
$(".phoneBox .materialButton").addClass('active')
for (var i = 1; i < 9; i++) {if (window.CP.shouldStopExecution(2)){break;}
$(".phoneBox .materialButton .scale .scaleColor:nth-child(" + i + ")").delay((i * 50) - 100).animate({
height: 50,
marginTop: -25
}, 300);
}
window.CP.exitedLoop(2);
}
})
$(".materialButton .scale .scaleColor").click(function() {
$(".color").removeClass('active');
$(".color").addClass('no-active');
$(".header-colors .header-color-" + ($(this).index() + 1)).each(function() {
$(this).addClass("active").removeClass('no-active').animate({
width: 3000,
height: 3000
}, 1500);
});
$(".phoneInfo-colors .phoneInfo-color-" + ($(this).index() + 1)).each(function() {
$(this).addClass("active").removeClass('no-active').animate({
width: 3000,
height: 3000
}, 1500);
});
$(".body-colors .body-color-" + ($(this).index() + 1)).each(function() {
$(this).addClass("active").removeClass('no-active').animate({
width: 3000,
height: 3000
}, 1500);
});
setTimeout(function() {
$(".color.no-active").width(0);
$(".color.no-active").height(0);
}, 1500);
})
setTimeout(function() {
$(".materialButton").click();
}, 1500)
setTimeout(function() {
$(".materialButton .scale .scaleColor").eq(4).click();
}, 3000)
});
//# sourceURL=pen.js
</script>
</body></html>
