doctype html
html(lang="es", dir="ltr")
head
meta(name="viewport", content="width=device-width, user-scalable=no, initial-scale=1.0")
meta(charset="utf-8")
link(rel="stylesheet", type="text/css", href="main.css")
body
audio#audio
source(src="https://raw.githubusercontent.com/ricardoolivaalonso/recursos/master/asiatic-a/song.mp3",type="audio/mpeg")
div.svgs
svg.svg-icon(viewbox='0 0 20 20').s#son
path(d='M17.969,10c0,1.707-0.5,3.366-1.446,4.802c-0.076,0.115-0.203,0.179-0.333,0.179c-0.075,0-0.151-0.022-0.219-0.065c-0.184-0.122-0.233-0.369-0.113-0.553c0.86-1.302,1.314-2.812,1.314-4.362s-0.454-3.058-1.314-4.363c-0.12-0.183-0.07-0.43,0.113-0.552c0.186-0.12,0.432-0.07,0.552,0.114C17.469,6.633,17.969,8.293,17.969,10 M15.938,10c0,1.165-0.305,2.319-0.88,3.339c-0.074,0.129-0.21,0.201-0.347,0.201c-0.068,0-0.134-0.016-0.197-0.052c-0.191-0.107-0.259-0.351-0.149-0.542c0.508-0.9,0.776-1.918,0.776-2.946c0-1.028-0.269-2.046-0.776-2.946c-0.109-0.191-0.042-0.434,0.149-0.542c0.193-0.109,0.436-0.042,0.544,0.149C15.634,7.681,15.938,8.834,15.938,10 M13.91,10c0,0.629-0.119,1.237-0.354,1.811c-0.063,0.153-0.211,0.247-0.368,0.247c-0.05,0-0.102-0.01-0.151-0.029c-0.203-0.084-0.301-0.317-0.217-0.521c0.194-0.476,0.294-0.984,0.294-1.508s-0.1-1.032-0.294-1.508c-0.084-0.203,0.014-0.437,0.217-0.52c0.203-0.084,0.437,0.014,0.52,0.217C13.791,8.763,13.91,9.373,13.91,10 M11.594,3.227v13.546c0,0.161-0.098,0.307-0.245,0.368c-0.05,0.021-0.102,0.03-0.153,0.03c-0.104,0-0.205-0.04-0.281-0.117l-3.669-3.668H2.43c-0.219,0-0.398-0.18-0.398-0.398V7.012c0-0.219,0.179-0.398,0.398-0.398h4.815l3.669-3.668c0.114-0.115,0.285-0.149,0.435-0.087C11.496,2.92,11.594,3.065,11.594,3.227 M7.012,7.41H2.828v5.18h4.184V7.41z M10.797,4.189L7.809,7.177v5.646l2.988,2.988V4.189z')
svg.svg-icon(viewbox='0 0 20 20')#soff
path(d='M18.084,11.639c0.168,0.169,0.168,0.442,0,0.611c-0.084,0.084-0.195,0.127-0.306,0.127c-0.111,0-0.221-0.043-0.306-0.127l-1.639-1.639l-1.639,1.639c-0.084,0.084-0.195,0.127-0.306,0.127c-0.111,0-0.222-0.043-0.307-0.127c-0.168-0.169-0.168-0.442,0-0.611L15.223,10l-1.64-1.639c-0.168-0.168-0.168-0.442,0-0.61c0.17-0.169,0.442-0.169,0.612,0l1.639,1.639l1.639-1.639c0.169-0.169,0.442-0.169,0.611,0c0.168,0.168,0.168,0.442,0,0.61L16.445,10L18.084,11.639z M12.161,2.654v14.691c0,0.175-0.105,0.333-0.267,0.4c-0.054,0.021-0.109,0.032-0.166,0.032c-0.111,0-0.223-0.043-0.305-0.127l-3.979-3.979H2.222c-0.237,0-0.432-0.194-0.432-0.432V6.759c0-0.237,0.195-0.432,0.432-0.432h5.222l3.979-3.978c0.123-0.125,0.309-0.163,0.471-0.095C12.056,2.322,12.161,2.479,12.161,2.654 M7.192,7.192H2.654v5.617h4.538V7.192z M11.296,3.698l-3.24,3.241v6.123l3.24,3.24V3.698z')
div.shadows
div.shadow-1#shadow
div.shadow-2
div.radio#radio
div.bf
div.bf__front.face
div.bf__back.face
div.bf__right.face
div.bf__left.face
div.bf__top.face
div.bf__bottom.face
div.ffa
div.ffa__front.face
div.ffa__front-circles#circles
//- div.ffa__back.face
div.ffa__right.face
div.range
div.range__front.face
div.range__back.face
div.range__right.face
div.range__left.face
div.range__top.face
div.range__bottom.face
div.ffa__left.face
div.ffa__top.face
div.ffa__bottom.face
div.ffb
div.ffb__front.face
//- div.ffb__back.face
div.ffb__right.face
div.ffb__left.face
div.ffb__top.face
div.ffb__bottom.face
div.ffc
div.ffc__front.face
//- div.ffc__back.face
div.ffc__right.face
div.ffc__left.face
div.ffc__top.face
div.ffc__bottom.face
div.ffd
div.ffd__front.face
//- div.ffd__back.face
div.ffd__right.face
div.ffd__left.face
div.ffd__top.face
div.ffd__bottom.face
div.buttons
div.button
div.button__front.face
div.button__back.face
div.button__right.face
div.button__left.face
div.button__top.face
div.button__bottom.face
div.button
div.button__front.face
div.button__back.face
div.button__right.face
div.button__left.face
div.button__top.face
div.button__bottom.face
div.button
div.button__front.face
div.button__back.face
div.button__right.face
div.button__left.face
div.button__top.face
div.button__bottom.face
div.button.button--cta#button-cta
div.button__front.face
div.button__back.face
div.button__right.face
div.button__left.face
div.button__top.face
div.button__bottom.face
div.cover#cover
div.cover-b
div.cover-b__front.face
//- div.cover-b__back.face
div.cover-b__right.face
div.cover-b__left.face
div.cover-b__top.face
div.cover-b__bottom.face
div.cassete
div.cassete__front.face
div.cassete__line
div.cassete__back.face
div.cassete__right.face
div.cassete__left.face
div.cassete__top.face
div.cassete__bottom.face
script(src="main.js")$white-1: #E9EBDB;
$white-2: #DEE0D3;
$white-3: #AAAAAA;
$white-4: #A1A1A0;
$white-4: #666666;
$black-1: #383832;
$yellow-1: #FFA460;
$yellow-2: #FCCD64;
$yellow-3: #D1A551;
/***********************/
/***********************/
@mixin cube($width, $height, $depth) {
&__front{ @include cube-front($width, $height, $depth); }
&__back{ @include cube-back($width, $height, $depth); }
&__right{ @include cube-right($width, $height, $depth); }
&__left{ @include cube-left($width, $height, $depth); }
&__top{ @include cube-top($width, $height, $depth);}
&__bottom{ @include cube-bottom($width, $height, $depth); }
}
/************************/
/* Mixin para crear cubo ( Caras siempre al frente ) */
/************************/
@mixin cube-front($width, $height, $depth) {
width: $width;
height: $height;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ( -($height - ($depth * 2) ) );
}
@mixin cube-back($width, $height, $depth) {
width: $width;
height: $height;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-$width) translateY(-$height) ;
}
@mixin cube-right($width, $height, $depth) {
width: $depth * 2;
height: $height;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ($width) translateX(-$depth * 2) translateY(-$height);
}
@mixin cube-left($width, $height, $depth) {
width: $depth * 2;
height: $height;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-$height);
}
@mixin cube-top($width, $height, $depth) {
width: $width;
height: $depth * 2;
transform-origin: top left;
transform: translateZ($height) ;
}
@mixin cube-bottom($width, $height, $depth) {
width: $width;
height: $depth * 2;
transform-origin: top left;
transform: rotateY(180deg) translateX(-$width);
}
/***********************/
/***********************/
@mixin face-ani($animation, $time, $side, $width-el, $height-el, $depth-el) {
animation: #{$animation} #{$time} infinite ease;
@keyframes #{$animation} {
0%, 15%, 45%, 60%, 62%, 68%{
@if $side == "cube-front" { @include cube-front($width-el, $height-el, $depth-el); }
@else if $side == "cube-back" { @include cube-back($width-el, $height-el, $depth-el); }
@else if $side == "cube-right" { @include cube-right($width-el, $height-el, $depth-el); }
@else if $side == "cube-left" { @include cube-left($width-el, $height-el, $depth-el); }
@else if $side == "cube-top" { @include cube-top($width-el, $height-el, $depth-el); }
}
20%, 40%, 58%, 64%, 70%, 100%{
@if $side == "cube-front" { @include cube-front($width-el, $height-finish, $depth-el); }
@else if $side == "cube-back" { @include cube-back($width-el, $height-finish, $depth-el); }
@else if $side == "cube-right" { @include cube-right($width-el, $height-finish, $depth-el); }
@else if $side == "cube-left" { @include cube-left($width-el, $height-finish, $depth-el); }
@else if $side == "cube-top" { @include cube-top($width-el, $height-finish, $depth-el); }
}
}
}
/**/
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
transform-style: preserve-3d;
-webkit-tap-highlight-color: transparent;
}
/* Generic */
body{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: $yellow-2;
cursor: pointer;
}
.face{ position: absolute; }
.svgs{
position: absolute;
z-index: 200000;
top: 50px;
left: 50%;
transform: translateX(-50%);
}
.svg-icon {
width: 30px;
height: 30px;
&:hover{ transform: scale(1.1);}
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: white;
}
.svg-icon circle {
stroke: white;
stroke-width: 1;
}
.s{ display: none; }
/***************/
.radio,
.shadows{
position: absolute;
width: 26vw;
height: 6vw;
transform:
perspective(10000px)
rotateX(80deg)
rotateZ(40deg)
translateZ(-9vw)
;
}
.shadow-1{
position: absolute;
width: 100%;
height: 400%;
bottom: 0;
left: 0;
transform-origin: bottom left;
transform: skewX(-10deg) translateZ(-1px);
background-color: $yellow-3;
}
.shadow-2{
position: absolute;
width: 102%;
height: 101%;
bottom: -3%;
left: -1%;
background-image: linear-gradient(to bottom, $yellow-3, darken($yellow-3, 10) );
transform: translateZ(-1px);
}
/***************/
$width-el: 26vw;
$height-el: 14vw;
$depth-el: 1.5vw;
.bf{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
position: absolute;
&__front{ background-color: $white-1; }
&__back{ background-color: $white-3; }
&__right{
background-color: $white-3;
border-left: .125vw solid darken($white-3, 10);
}
&__left{
background-color: $white-1;
border-right: .125vw solid darken($white-1, 10);
}
&__top{
background-color: $white-2;
border-bottom: .125vw solid darken($white-2, 10);
}
&__bottom{ background-color: $white-3; }
}
/*----------------------*/
$width-el: 12vw;
$height-el: 14vw;
$depth-el: 1.5vw;
.ffa{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
position: absolute;
top: 50%;
right: 0;
&__front{
background-color: $white-1;
&-circles{
width: 100%;
height: 80%;
padding: 3vw 2vw 1vw;
background-image:
linear-gradient(-90deg, transparent 0%, transparent 50%, $white-1 50%, $white-1 100%),
linear-gradient( 0deg, $black-1 0%, $black-1 50%, $white-1 50%, $white-1 100%);
background-size: .9vw .9vw;
background-clip: content-box;
}
}
&__back{ background-color: $white-2; }
&__right{
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 3vw;
background-color: $white-3;
}
&__left{ background-color: $white-2; }
&__top{ background-color: $white-2; }
&__bottom{ background-color: $white-3; }
}
$width-el: .4vw;
$height-el: .3vw;
$depth-el: .6vw;
.range{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
position: absolute;
&__front{ background-color: darken($black-1, 10); }
&__back{ background-color: darken($black-1, 5); }
&__right{ background-color: darken($black-1, 5); }
&__left{ background-color: $black-1; }
&__top{ background-color: darken($black-1, 10); }
&__bottom{
background-color: darken($black-1, 10);
&::before{
content: '';
position: absolute;
width: 100%;
height: 5vw;
transform: translateZ(-1px);
background-color: $white-4;
}
}
}
/*----------------------*/
$width-el: 2vw;
$height-el: 14vw;
$depth-el: 1.5vw;
.ffb{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
position: absolute;
top: 50%;
left: 0;
&__front{ background-color: $white-1; }
&__back{ background-color: $white-2; }
&__right{ background-color: $white-3; }
&__left{ background-color: $white-1; }
&__top{ background-color: $white-2; }
&__bottom{ background-color: $white-3; }
}
/*----------------------*/
$width-el: 12vw;
$height-el: 3vw;
$depth-el: 1.5vw;
.ffc{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
position: absolute;
top: 50%;
left: 2vw;
transform: translateZ(11vw);
&__front{ background-color: $white-1; }
&__back{ background-color: $white-2; }
&__right{ background-color: $white-3; }
&__left{ background-color: $white-1; }
&__top{ background-color: $white-2; }
&__bottom{ background-color: $white-3; }
}
/*----------------------*/
$width-el: 12vw;
$height-el: 3vw;
$depth-el: 1.5vw;
.ffd{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
position: absolute;
top: 50%;
left: 2vw;
transform: translateZ(2vw);
&__front{ background-color: $white-1; }
&__back{ background-color: $white-2; }
&__right{ background-color: $white-3; }
&__left{ background-color: $white-1; }
&__top{ background-color: $white-3; }
&__bottom{ background-color: $white-3; }
}
/*----------------------*/
.buttons{
position: absolute;
left: 2vw;
width: 12vw;
height: 50%;
bottom: 0;
transform: translateZ(.1vw);
}
$width-el: 2.875vw;
$height-el: 1.8vw;
$depth-el: 1.5vw;
.button{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
position: absolute;
&:nth-of-type(1){ left: .1vw; }
&:nth-of-type(2){ left: 3.1vw; }
&:nth-of-type(3){ left: 6.1vw; }
&:nth-of-type(4){ left: 9.1vw; }
&__front{ background-color: darken($white-1, 1); }
&__back{ background-color: $white-2; }
&__right{ background-color: darken($white-3, 5); }
&__left{ background-color: $white-1; }
&__top{ background-color: darken($white-3, 5); }
&__bottom{ background-color: $white-3; }
&--cta{
&:hover .button__front{
background-color: darken($yellow-1, 18);
transition: .1s;
cursor: pointer;
}
.button__front{ background-color: darken($yellow-1, 15); }
.button__back{ background-color: darken($yellow-1, 18); }
.button__right{ background-color: darken($yellow-1, 20); }
.button__left{ background-color: darken($yellow-1, 15); }
.button__top{ background-color: darken($yellow-1, 20); }
.button__bottom{ background-color: darken($yellow-1, 18); }
}
}
/*----------------------*/
.cover{
position: absolute;
left: 2vw;
width: 12vw;
height: 50%;
bottom: 0;
transform: translateZ(5vw) rotateX(-20deg);
transition: .2s;
}
$width-el: 12vw;
$height-el: 6vw;
$depth-el: .1vw;
.cover-b{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
position: absolute;
bottom: 0;
left: .1vw;
&__front{
background-color: rgba($white-1, .1);
border: .11vw solid $white-2;
border-bottom: .1vw solid $white-3;
box-shadow:
inset 1.125vw 1.125vw 0 $white-1,
inset -1.125vw -1.125vw 0 $white-1
;
}
&__back{ background-color: $white-2; }
&__right{ background-color: $white-3; }
&__left{ background-color: $white-2; }
&__top{ background-color: $white-2; }
&__bottom{ background-color: $white-3; }
}
/*----------------------*/
$width-el: 11vw;
$height-el: 5vw;
$depth-el: 1vw;
.cassete{
@include cube($width-el, $height-el, $depth-el);
width: $width-el;
height: $depth-el;
position: absolute;
left: 2.5vw;
width: 12vw;
height: 50%;
bottom: -10%;
transform: translateZ(5.5vw);
&__line{
position: absolute;
bottom: .3vw;
width: 50%;
height: .3vw;
background-color: darken($yellow-1, 12);
z-index: 10;
border-radius: 1vw;
}
&__front{
display: flex;
justify-content: space-around;
align-items: center;
background-color: $white-1;
border: 1vw solid $black-1;
border-left: 1.35vw solid $black-1;
border-right: 1.35vw solid $black-1;
&::before,
&::after{
content: '';
position: relative;
width: 1.4vw;
height: 1.4vw;
border-radius: 50%;
background-color: $black-1;
}
}
&__back{ background-color: darken($black-1, 5); }
&__right{ background-color: darken($black-1, 10); }
&__left{ background-color: $black-1; }
&__top{ background-color: darken($black-1, 5); }
&__bottom{ background-color: darken($black-1, 10); }
}
/****************/
.is-radio-active{
animation: radio .6s infinite alternate ease-in-out;
}
.is-shadow-active{
animation: shadow .6s infinite alternate ease-in-out;
}
.is-button-active{
transform: translateY(-.4vw) translateZ(.5vw) rotateX(-10deg);
transition: .1s;
.button__front{
background-color: darken($yellow-1, 20);
}
}
.is-cover-active{
transform: translateZ(5vw);
transition: .2s;
}
.is-circle-active{
animation: circle .2s infinite alternate 1s;
}
/****************/
@keyframes radio {
0%, 85%{
transform:
perspective(10000px)
rotateX(80deg)
rotateZ(40deg)
translateZ(-9vw)
rotateY(0deg)
;
}
30%, 50%, 80%{
transform:
perspective(10000px)
rotateX(80deg)
rotateZ(40deg)
translateZ(-8.8vw)
rotateY(-2deg)
;
}
60%, 100%{
transform:
perspective(10000px)
rotateX(80deg)
rotateZ(40deg)
translateZ(-8.8vw)
rotateY(2deg)
;
}
}
@keyframes shadow {
0%, 85%{
height: 400%;
left: 0%;
}
30%, 50%, 80%{
height: 410%;
left: 3%;
}
60%, 100%{
height: 400%;
left: 0%;
}
}
@keyframes circle {
0%, 10%, 30%, 50%, 80%{
background-size: .9vw .9vw;
}
20%, 70%, 90%, 100%{
background-size: .91vw .91vw;
}
}
/*
Designed by: liukui
Original image: https://dribbble.com/shots/3029443-Radio-Gif
*/
const b = document.body;
const radio = document.querySelector("#radio");
const shadow= document.querySelector("#shadow");
const buttonCta = document.querySelector("#button-cta");
const cover = document.querySelector("#cover");
const circles = document.querySelector("#circles");
const a = document.querySelector("#audio");
const son = document.querySelector("#son");
const soff = document.querySelector("#soff");
/*******************/
const radioPlaying = () => {
radio.classList.toggle('is-radio-active')
shadow.classList.toggle('is-shadow-active')
buttonCta.classList.toggle('is-button-active')
cover.classList.toggle('is-cover-active')
// circles.classList.toggle('is-circle-active')
a.loop = true;
if (a.paused) a.play();
else {
a.pause();
a.currentTime = 0;
}
son.classList.toggle("s");
soff.classList.toggle("s");
}
/*******************/
buttonCta.addEventListener("click", radioPlaying)
soff.addEventListener("click", radioPlaying)
son.addEventListener("click", radioPlaying)
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.