Skip to content

Instantly share code, notes, and snippets.

@betul

betul/Microphone App Experience.markdown

Created May 22, 2015 08:07
Show Gist options
  • Save betul/f0cc3b629250371853f9 to your computer and use it in GitHub Desktop.
Save betul/f0cc3b629250371853f9 to your computer and use it in GitHub Desktop.
Download ZIP
Microphone App Experience
Raw
index.html
<div class="wrapper">
<div class="button-wrapper">
<div class="button">
<svg class="button-svg" viewBox="0 0 24 24">
<path d="M12 15c1.66 0 2.99-1.34 2.99-3l.01-6c0-1.66-1.34-3-3-3s-3 1.34-3 3v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1s-5.3-2.1-5.3-5.1h-1.7c0 3.42 2.72 6.23 6 6.72v3.28h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/>
<path d="M0 0h24v24h-24z" fill="none"/>
</svg>
</div>
</div>
<div class="active-wrapper">
<div class="stop-button">
<svg class="stop-button-svg" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M6 6h12v12H6z"/>
</svg>
</div>
<div class="dots">
<div class="dots-col">
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
</div>
<div class="dots-col">
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
</div>
<div class="dots-col">
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
</div>
<div class="dots-col">
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
</div>
<div class="dots-col">
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
</div>
<div class="dots-col">
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
</div>
<div class="dots-col">
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
</div>
<div class="dots-col">
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
</div>
<div class="dots-col">
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
<div class="dots-dot"></div>
</div>
</div>
</div>
</div>
<a href="http://ettrics.com/code/interactive-voice-app-prototype/" class="logo" target="_blank">
<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" />
</a>
Raw
Microphone App Experience.markdown

Microphone App Experience ('-' * 25) A material design inspired voice recording app prototype. Not functional, just showing off animations.

A Pen by Ettrics on CodePen.

License.

Raw
script.js
var button = $('.button');
var mic = button.find('svg');
var active = $('.active-wrapper');
var stop = $('.stop-button');
var dotCol = $('.dots-col');
var w = $(window);
var vw = w.innerWidth();
var vh = w.innerHeight();
var bw = button.innerWidth();
var bh = button.innerHeight();
var s;
var clone = button.clone();
clone.find('svg').remove();
button.before(clone);
var open = function() {
if (vw > vh) {
s = vw / bw * 1.5;
} else {
s = vh / bh * 1.5;
}
var scale = 'scale(' + s + ') translate(-50%,-50%)';
clone.css({
transform: scale
});
mic.css({
fill: 'rgba(0,0,0,0.2)',
transform: 'scale(4)'
});
button.on('transitionend', function() {
active.addClass('active');
$(this).off('transitionend');
});
return false;
};
var close = function() {
active.removeClass('active');
clone.removeAttr('style');
mic.removeAttr('style');
};
button.on('click', open);
stop.on('click', close);
Raw
style.css
$ease: all .6s cubic-bezier(0.23, 1, 0.32, 1);
* {
box-sizing: border-box;
}
body {
overflow: hidden;
}
.wrapper {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.button {
will-change: transform;
$size: 140px;
width: $size;
height: $size;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #5fb5fe;
border-radius: 50%;
transform-origin: left top;
transition: $ease;
cursor: pointer;
&-wrapper {
height: 100vh;
width: 100vw;
overflow: hidden;
background: lighten(black, 10);
}
&-svg {
$size: 80px;
width: $size;
height: $size;
fill: white;
transition: $ease;
}
&:hover {
svg {
fill: rgba(black, 0.2);
}
}
}
.active-wrapper {
display: flex;
align-items: flex-end;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
visibility: hidden;
opacity: 0;
transition: $ease;
&.active {
opacity: 1;
visibility: visible;
.dots-col {
transform: rotateX(0);
}
}
}
.stop-button {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
margin-bottom: 6vh;
background: rgba(black, 0.3);
border-radius: 50%;
cursor: pointer;
&-svg {
fill: white;
$size: 40px;
width: $size;
height: $size;
transition: $ease;
}
&:hover {
background: rgba(black, 0.45);
svg {
fill: tomato;
}
}
}
.dots {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
perspective: 400px;
&-col {
margin: 15px;
transform: rotateX(-90deg);
transform-origin: bottom center;
transition: all .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
@media (max-width: 600px) {
margin: 9px;
}
}
&-dot {
$size: 20px;
width: $size;
height: $size;
background: white;
opacity: 0.3;
border-radius: 50%;
margin: 15px 0;
@media (max-width: 600px) {
$size: 13px;
width: $size;
height: $size;
margin: 9px 0;
}
}
}
@for $i from 4 through 6 {
.dots-col:nth-child(1) > .dots-dot:nth-child(#{$i}) {
animation: lightup .6s cubic-bezier(0.86, 0, 0.07, 1) infinite;
animation-delay: $i * -0.06s;
}
}
@for $i from 3 through 6 {
.dots-col:nth-child(2) > .dots-dot:nth-child(#{$i}) {
animation: lightup .7s cubic-bezier(0.86, 0, 0.07, 1) infinite;
animation-delay: $i * -0.08s;
}
}
@for $i from 2 through 6 {
.dots-col:nth-child(3) > .dots-dot:nth-child(#{$i}) {
animation: lightup .8s cubic-bezier(0.86, 0, 0.07, 1) infinite;
animation-delay: $i * -0.04s;
}
}
@for $i from 3 through 6 {
.dots-col:nth-child(4) > .dots-dot:nth-child(#{$i}) {
animation: lightup .9s cubic-bezier(0.86, 0, 0.07, 1) infinite;
animation-delay: $i * -0.05s;
}
}
@for $i from 2 through 6 {
.dots-col:nth-child(5) > .dots-dot:nth-child(#{$i}) {
animation: lightup .8s cubic-bezier(0.86, 0, 0.07, 1) infinite;
animation-delay: $i * -0.06s;
}
}
@for $i from 2 through 6 {
.dots-col:nth-child(6) > .dots-dot:nth-child(#{$i}) {
animation: lightup 1s cubic-bezier(0.86, 0, 0.07, 1) infinite;
animation-delay: $i * -0.06s;
}
}
@for $i from 3 through 6 {
.dots-col:nth-child(7) > .dots-dot:nth-child(#{$i}) {
animation: lightup .9s cubic-bezier(0.86, 0, 0.07, 1) infinite;
animation-delay: $i * -0.05s;
}
}
@for $i from 4 through 6 {
.dots-col:nth-child(8) > .dots-dot:nth-child(#{$i}) {
animation: lightup .9s cubic-bezier(0.86, 0, 0.07, 1) infinite;
animation-delay: $i * -0.05s;
}
}
@for $i from 5 through 6 {
.dots-col:nth-child(9) > .dots-dot:nth-child(#{$i}) {
animation: lightup .8s cubic-bezier(0.86, 0, 0.07, 1) infinite;
animation-delay: $i * -0.05s;
}
}
@keyframes lightup {
0% {
opacity: 0.3;
}
50% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
.logo {
position: fixed;
bottom: 3vh;
right: 3vw;
z-index: 2;
img {
width: 65px;
transition: $ease;
transform: rotate(0);
&:hover {
transform: rotate(180deg) scale(1.1);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment