Simple experiments about FAB and motion
Forked from Mattia Astorino's Pen Material Design - FAB Motion Animation.
.card | |
.card__header | |
button.fab | |
.card__content | |
|CLOSE ME | |
Simple experiments about FAB and motion
Forked from Mattia Astorino's Pen Material Design - FAB Motion Animation.
$(".fab").on('click', function(){ | |
$(this).parent(".card").toggleClass("is-expandend"); | |
$("body").toggleClass("is-expandend"); | |
}) |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
// PEN SETTINGS | |
$background-color: #880E4F; | |
$header-color: #3F51B5; | |
$fab-color: #F50057; | |
// ············································ | |
// TOOLKITS | |
// ············································ | |
// Original z shadows from polymer project | |
@mixin elevation( $depth ) { | |
// 0 z-depth | |
@if $depth < 1 { | |
box-shadow: none; | |
} | |
// 1 z-depth | |
@if $depth == 1 { | |
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); | |
} | |
// 2 z-depth | |
@if $depth == 2 { | |
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), | |
0 6px 10px 0 rgba(0, 0, 0, 0.3); | |
} | |
// 3 z-depth | |
@if $depth == 3 { | |
box-shadow: 0 11px 7px 0 rgba(0, 0, 0, 0.19), | |
0 13px 25px 0 rgba(0, 0, 0, 0.3); | |
} | |
// 4 z-depth | |
@if $depth == 4 { | |
box-shadow: 0 14px 12px 0 rgba(0, 0, 0, 0.17), | |
0 20px 40px 0 rgba(0, 0, 0, 0.3); | |
} | |
// 5 z-depth | |
@if $depth == 5 { | |
box-shadow: 0 17px 17px 0 rgba(0, 0, 0, 0.15), | |
0 27px 55px 0 rgba(0, 0, 0, 0.3); | |
} | |
} | |
body { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
height: 100vh; | |
transition: all 500ms; | |
transition-delay: 200ms; | |
background-color: #ECEFF1; | |
&.is-expandend { | |
background-color: $background-color; } | |
} | |
.card { | |
width: 300px; | |
height: 400px; | |
position: relative; | |
overflow: hidden; | |
cursor: default; | |
box-sizing: border-box; | |
background-color: #FFF; | |
border-radius: 4px; | |
box-sizing: border-box; | |
box-shadow: 0 1px 3px rgba(0,0,0,0.2); | |
z-index: 10; | |
&.is-expandend { | |
.fab { | |
transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
transition-delay: 200ms; | |
transform: scale(30); } | |
.fab:before { | |
transform: scale(6); | |
opacity: 0; | |
transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); | |
border: 3px solid $fab-color; } | |
.card__content { | |
transition: all 400ms; | |
transition-delay: 400ms; | |
opacity: 1; } | |
} | |
} | |
.card__header { | |
background-color: $header-color; | |
height: 70%; } | |
.card__content { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
bottom: 0; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
opacity: 0; | |
transition: all 200ms; | |
transition-delay: 0ms; | |
pointer-events: none; | |
color: lighten( $fab-color, 30% ); } | |
.fab { | |
display: block; | |
position: absolute; | |
width: 52px; | |
height: 52px; | |
right: 16px; | |
transform: translateY( -50% ); | |
border: none; | |
border-radius: 50%; | |
outline: none; | |
transition: all 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000); | |
transition-dealy: 200ms; | |
background-color: $fab-color; | |
@include elevation( 2 ); | |
&:before { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
box-sizing: border-box; | |
border-radius: 50%; | |
z-index: 1; | |
opacity: 1; | |
transition: all 0ms cubic-bezier(0.190, 1.000, 0.220, 1.000); | |
border: 2px solid $fab-color; } | |
} | |