<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/blunk/pen/oxbaeX?depth=everything&order=popularity&page=84&q=pack&show_forks=false" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100,500' rel='stylesheet' type='text/css'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" type="text/css">
<style class="cp-pen-styles">html, body {
height: 100%;
min-height: 600px; }
body {
background-color: #EDF1F2;
font-family: 'Roboto', sans-serif; }
.container {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
height: 100%; }
.intro {
text-align: center;
margin: 20px 0; }
.intro h1 {
font-size: 26px;
margin-bottom: 8px; }
.intro p {
font-size: 14px;
margin: 0; }
h1, h2 {
margin: 0;
font-weight: 400; }
.card {
background: #FFFFFF;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24);
border-radius: 10px;
width: 320px;
min-height: 420px;
overflow: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0); }
.card-header {
padding: 0px 30px 40px 30px; }
.card-subtitle {
margin-top: 42px;
line-height: 1.4em;
min-height: 60px;
font-size: 14px;
padding-right: 80px; }
.card-title {
font-size: 44px;
margin-top: -20px; }
.card-title em {
font-size: 16px;
font-style: normal; }
.chart-mask-inside {
-webkit-clip-path: circle(0 at 50% 50%);
clip-path: circle(0 at 50% 50%); }
.chart-mask {
-webkit-clip-path: circle(25px at 50% 50%);
clip-path: circle(25px at 50% 50%);
-webkit-transform: translate(calc(50% - 50px), 50%);
transform: translate(calc(50% - 50px), 50%);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24);
-webkit-animation: none;
animation: none; }
.chart-mask .ui-chart {
background-color: rgba(234, 106, 13, 0); }
.chart-mask .ui-fab {
background-color: #ea6a0d;
color: white; }
.chart-mask .chart-mask-inside {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden; }
.chart-mask .chart-mask-inside .ui-chart-container {
margin-top: 75px; }
.chart-mask.visible {
-webkit-animation: chartMaskOpen 1s ease normal forwards;
animation: chartMaskOpen 1s ease normal forwards; }
.chart-mask.visible.chart-overlay hgroup {
-webkit-animation: allowClickHack 1s ease normal forwards;
animation: allowClickHack 1s ease normal forwards;
position: relative; }
.chart-mask.visible .ui-fab.ui-fab-center {
-webkit-animation: FabOpen 1s ease normal forwards;
animation: FabOpen 1s ease normal forwards; }
.chart-mask.visible .ui-fab.ui-fab-center svg {
-webkit-animation: FabIconOpen 1s ease normal forwards;
animation: FabIconOpen 1s ease normal forwards; }
.chart-mask.visible .ui-chart {
-webkit-animation: uiChartOpen 1s ease normal forwards;
animation: uiChartOpen 1s ease normal forwards; }
.chart-mask.visible .chart-mask-inside {
visibility: visible;
-webkit-animation: chartMaskInsideOpen 1s ease normal forwards;
animation: chartMaskInsideOpen 1s ease normal forwards; }
.chart-mask.reverse {
-webkit-animation: chartMaskClose 1s ease reverse backwards;
animation: chartMaskClose 1s ease reverse backwards; }
.chart-container {
position: relative; }
.chart-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%; }
.ui-chart-container {
width: 90%;
margin: 0 auto;
height: 180px; }
.ui-chart-full {
width: 100%; }
.ui-fab {
outline: none;
border: none;
color: white;
font-size: 23px;
border-radius: 25px; }
.ui-fab svg {
margin-top: 8px; }
.ui-fab-center {
width: 50px;
height: 50px;
position: absolute;
top: calc(50% - 25px);
right: calc(50% - 25px); }
.ui-fab-orange {
background-color: #E9690D;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24); }
.ui-chart {
display: block;
height: 250px;
width: 100%; }
.ui-chart hgroup {
text-align: center;
padding: 20px 10px 0;
position: relative; }
.ui-chart hgroup button {
position: absolute;
left: 10px; }
.ui-chart-title {
font-size: 24px; }
.ui-chart-date {
font-size: 14px;
margin-top: 5px; }
.ui-chart-orange {
background-color: #EA6A0D; }
.ui-chart-orange .ui-chart-title {
color: white; }
.ui-chart-orange .ui-chart-date {
color: rgba(255, 255, 255, 0.55); }
.ui-chart-pink {
background-color: #CF3260; }
.ui-chart-pink .ui-chart-title {
color: white; }
.ui-chart-pink .ui-chart-date {
color: rgba(255, 255, 255, 0.55); }
.ble {
display: block;
width: 50px;
height: 50px;
background-color: red;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation: none;
animation: none; }
.ble.animate {
-webkit-animation-name: Demo;
animation-name: Demo;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.ble.reverse {
-webkit-animation-name: DemoBack;
animation-name: DemoBack;
-webkit-animation-direction: forwards;
animation-direction: forwards; }
@-webkit-keyframes Demo {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
button {
-webkit-transform: scale(1);
transform: scale(1); } }
100% {
-webkit-transform: translateX(150px);
transform: translateX(150px);
button {
-webkit-transform: scale(1.5);
transform: scale(1.5); } } }
@keyframes Demo {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
button {
-webkit-transform: scale(1);
transform: scale(1); } }
100% {
-webkit-transform: translateX(150px);
transform: translateX(150px);
button {
-webkit-transform: scale(1.5);
transform: scale(1.5); } } }
@-webkit-keyframes DemoBack {
0% {
-webkit-transform: translateX(150px);
transform: translateX(150px); }
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px); } }
@keyframes DemoBack {
0% {
-webkit-transform: translateX(150px);
transform: translateX(150px); }
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px); } }
@-webkit-keyframes allowClickHack {
0% {
z-index: 0; }
99% {
z-index: 0; }
100% {
z-index: 2; } }
@keyframes allowClickHack {
0% {
z-index: 0; }
99% {
z-index: 0; }
100% {
z-index: 2; } }
@-webkit-keyframes chartMaskOpen {
0% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1);
transform: translate(calc(50% - 50px), 50%) scale(1); }
8% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1.2);
transform: translate(calc(50% - 50px), 50%) scale(1.2); }
16% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1);
transform: translate(calc(50% - 50px), 50%) scale(1); }
30% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1);
transform: translate(calc(50% - 50px), 50%) scale(1);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24);
-webkit-clip-path: circle(25px at 50% 50%);
clip-path: circle(25px at 50% 50%); }
70% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
box-shadow: 0px 0px 0px 0px transparent;
-webkit-clip-path: circle(25px at 50% 50%);
clip-path: circle(25px at 50% 50%); }
90% { }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-clip-path: circle(70% at 50% 50%);
clip-path: circle(70% at 50% 50%); } }
@keyframes chartMaskOpen {
0% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1);
transform: translate(calc(50% - 50px), 50%) scale(1); }
8% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1.2);
transform: translate(calc(50% - 50px), 50%) scale(1.2); }
16% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1);
transform: translate(calc(50% - 50px), 50%) scale(1); }
30% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1);
transform: translate(calc(50% - 50px), 50%) scale(1);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24);
-webkit-clip-path: circle(25px at 50% 50%);
clip-path: circle(25px at 50% 50%); }
70% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
box-shadow: 0px 0px 0px 0px transparent;
-webkit-clip-path: circle(25px at 50% 50%);
clip-path: circle(25px at 50% 50%); }
90% { }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-clip-path: circle(70% at 50% 50%);
clip-path: circle(70% at 50% 50%); } }
@-webkit-keyframes chartMaskClose {
0% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1);
transform: translate(calc(50% - 50px), 50%) scale(1); }
8% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1.2);
transform: translate(calc(50% - 50px), 50%) scale(1.2); }
16% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1);
transform: translate(calc(50% - 50px), 50%) scale(1); }
30% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1);
transform: translate(calc(50% - 50px), 50%) scale(1);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24);
-webkit-clip-path: circle(25px at 50% 50%);
clip-path: circle(25px at 50% 50%); }
70% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
box-shadow: 0px 0px 0px 0px transparent;
-webkit-clip-path: circle(25px at 50% 50%);
clip-path: circle(25px at 50% 50%); }
90% { }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-clip-path: circle(70% at 50% 50%);
clip-path: circle(70% at 50% 50%); } }
@keyframes chartMaskClose {
0% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1);
transform: translate(calc(50% - 50px), 50%) scale(1); }
8% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1.2);
transform: translate(calc(50% - 50px), 50%) scale(1.2); }
16% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1);
transform: translate(calc(50% - 50px), 50%) scale(1); }
30% {
-webkit-transform: translate(calc(50% - 50px), 50%) scale(1);
transform: translate(calc(50% - 50px), 50%) scale(1);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24);
-webkit-clip-path: circle(25px at 50% 50%);
clip-path: circle(25px at 50% 50%); }
70% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
box-shadow: 0px 0px 0px 0px transparent;
-webkit-clip-path: circle(25px at 50% 50%);
clip-path: circle(25px at 50% 50%); }
90% { }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-clip-path: circle(70% at 50% 50%);
clip-path: circle(70% at 50% 50%); } }
@-webkit-keyframes chartMaskInsideOpen {
84% {
-webkit-clip-path: circle(0px at 50% 50%);
clip-path: circle(0px at 50% 50%); }
100% {
-webkit-clip-path: circle(100% at 50% 50%);
clip-path: circle(100% at 50% 50%); } }
@keyframes chartMaskInsideOpen {
84% {
-webkit-clip-path: circle(0px at 50% 50%);
clip-path: circle(0px at 50% 50%); }
100% {
-webkit-clip-path: circle(100% at 50% 50%);
clip-path: circle(100% at 50% 50%); } }
@-webkit-keyframes FabIconOpen {
30% {
opacity: 1; }
88% {
opacity: 0; }
100% {
opacity: 0; } }
@keyframes FabIconOpen {
30% {
opacity: 1; }
88% {
opacity: 0; }
100% {
opacity: 0; } }
@-webkit-keyframes FabOpen {
30% {
background-color: #ea6a0d;
color: white;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24); }
70% {
background-color: #ea6a0d; }
75% {
box-shadow: 0px 0px 0px 0px transparent; }
88% {
color: rgba(255, 255, 255, 0); }
90% {
background-color: rgba(234, 106, 13, 0);
color: rgba(255, 255, 255, 0); }
100% {
background-color: rgba(234, 106, 13, 0);
color: rgba(255, 255, 255, 0);
box-shadow: 0px 0px 0px 0px transparent; } }
@keyframes FabOpen {
30% {
background-color: #ea6a0d;
color: white;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24); }
70% {
background-color: #ea6a0d; }
75% {
box-shadow: 0px 0px 0px 0px transparent; }
88% {
color: rgba(255, 255, 255, 0); }
90% {
background-color: rgba(234, 106, 13, 0);
color: rgba(255, 255, 255, 0); }
100% {
background-color: rgba(234, 106, 13, 0);
color: rgba(255, 255, 255, 0);
box-shadow: 0px 0px 0px 0px transparent; } }
@-webkit-keyframes uiChartOpen {
0% {
background-color: rgba(234, 106, 13, 0); }
70% {
background-color: rgba(234, 106, 13, 0); }
71% {
background-color: #ea6a0d; }
100% {
background-color: #ea6a0d; } }
@keyframes uiChartOpen {
0% {
background-color: rgba(234, 106, 13, 0); }
70% {
background-color: rgba(234, 106, 13, 0); }
71% {
background-color: #ea6a0d; }
100% {
background-color: #ea6a0d; } }
.c3-axis-x-label {
color: white;
fill: white; }
.c3-axis .tick {
fill: white; }
.c3-axis line {
display: none; }
path.domain {
stroke: none; }
line.c3-ygrid {
stroke: rgba(255, 255, 255, 0.2);
stroke-dasharray: none; }
.c3-ygrid-lines {
display: none; }
.c3-bars {
opacity: 0.8; }
.c3-area-data {
fill: white; }
#current-chart .c3-line-data {
stroke-width: 4px; }
</style></head><body>
<main class="container">
<div class="intro">
<h1>FAB Chart Transition</h1>
<p>Small excercies using clip-path and css animations. Still working on it.</p>
<p>Just click the orange "FAB"</p>
</div>
<div class="card">
<div class="chart-container">
<div class="ui-chart ui-chart-pink">
<hgroup>
<h1 class="ui-chart-title">The Current Chart</h1>
<h2 class="ui-chart-date">2014.12.25</h2>
</hgroup>
<div id="current-chart" class="ui-chart-container ui-chart-full">
</div>
</div>
<div class="chart-mask chart-overlay">
<button id="open-mask" class="ui-fab-center ui-fab ui-fab-orange">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><style>.st0{fill:#FFFFFF;} .st1{fill:none;}</style><path class="st0" d="M4.1 4.5H8v15H4.1zm5.8 4h3.9v11H9.9zm6.2 4H20v7h-3.9z"/><path class="st1" d="M0 0h24v24H0V0z"/></svg>
</button>
<div class="ui-chart ui-chart-orange">
<hgroup>
<button id="close-mask" class="ui-fab">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><style>.st0{fill:#FFFFFF;} .st1{fill:none;}</style><path class="st0" d="M15.4 7.4L14 6l-6 6 6 6 1.4-1.4-4.6-4.6 4.6-4.6z"/><path class="st1" d="M0 0h24v24H0V0z"/></svg>
</button>
<h1 class="ui-chart-title">Time Power</h1>
<h2 class="ui-chart-date">2014.12.25</h2>
</hgroup>
<div class="chart-mask-inside">
<div id="time-power" class="ui-chart-container">
</div>
</div>
</div>
</div>
</div>
<div class="card-header">
<div class="card-subtitle">
Total Electricity Consumption at home
</div>
<h2 class="card-title">
<span>180.9</span>
<em>kWh</em>
</h2>
</div>
</div>
</main>
<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 src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js'></script>
<script >$( document ).ready(function() {
$('#open-mask').on('click', function() {
$('.chart-mask').addClass('visible');
});
$('#close-mask').on('click', function() {
$('.chart-mask').removeClass('visible');
});
// TODO: Replace Chart with this:
// https://groups.google.com/forum/#!topic/d3-js/MlTB72KD4dk
// http://jsfiddle.net/3wW6X/
window.currentOptions = {
bindto: '#current-chart',
padding: {
left: -10,
right: -10,
bottom: -30
},
height: 180,
data: {
columns: [
['data', 78, 90, 75, 90, 75]
],
colors: {
data: '#ffffff'
},
types: {
data: 'area-spline'
}
},
axis: {
y: {
show: false,
min: 0,
max: 140
},
x: {
show: false,
}
},
legend: {
show: false
},
tooltip: {
show: false
},
point: {
show: false
}
};
window.current = c3.generate(currentOptions);
var chart = c3.generate({
bindto: '#time-power',
// size: {
// width: 200
// },
grid: {
y: {
show: true
}
},
padding: {
left: 26,
right: 26
},
axis: {
x: {
show: true,
label: {
},
tick: {
centered: true,
culling: true,
count: 7,
format: function(d) {
var digit = d+2;
if (digit < 10) {
return '0' + digit;
}
return digit;
}
}
},
y: {
show: true,
tick: {
values: [0,50,100,150,200],
padding: {
top: 10
}
},
min: 0,
max: 200,
padding: {
bottom: 0,
top: 0
}
}
},
legend: {
hide: true
},
tooltip: {
show: false
},
point: {
show: false
},
bar: {
width: 2
},
data: {
columns: [
['data1', 70, 80, 110, 170, 90, 80, 180, 80, 110, 160, 60, 80, 140]
],
colors: {
data1: '#ffffff'
},
type: 'bar'
}
});
});
//# sourceURL=pen.js
</script>
</body></html>
