UI Design
November 23, 2016
Membuat Morphing Button Menggunakan CSS & Javascript
Dalam postingan ini kita akan mencoba untuk Membuat Morphing Button Menggunakan CSS Dan Javascript, nantinya yang kita buat akan terlihat seperti musiXmatch Musik Recognizer tapi bukannya menunjukkan hasil di layar penuh, di sini saya akan menunjukkan kartu dengan inforrmasi artis dan judul lagu. Tutorial ini saya kutip langsung dari blog saya karena lagi tidak ada bahan, buat yang mengerti bahasa inggris bisa mampir ke http://muhammadsayuti.com :D.
Pertama buatlah file html baru dan beri nama index.html dan kemudian salin template di bawah ini.
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Muhammad Sayuti">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/icons.css">
<title>Morphing Button</title>
</head>
<body>
<div class="content">
<div class="morpher">
<a class="circle-button" href="#"><span class="icon icon--microphone"></span></a>
</div>
<div class="player">
<img class="player__cover" src="img/Montevallo.jpeg" alt="Take Your Time by Sam Hunt" />
<div class="player__meta">
<h4 class="player__track">Take Your Time</h3>
<h4 class="player__artist">Sam Hunt</h3n>
<h4 class="player__album-name">Montevallo</h3>
</div>
<a href="#" class="button--close"><span class="icon icon--cross"></span></a>
</div><!-- /player -->
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
Selanjutnya buatlah file css baru dan beri nama style.css dan copy css di bawah ini.
html,body{
padding:0px;
margin:0px;
font-family:san-serif;
background-color: #eee;
}
*{
box-sizing:border-box;
}
.content{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
align-items: center;
justify-content: center;
flex-direction: column;
flex-flow: column wrap;
height:100vh;
}
/* Buttton container Style */
.morpher{
color: #2196F3;
align-items: center;
background-color: #FFF;
display: flex;
-webkit-box-flex: 0;
justify-content: center;
flex: none;
min-height: 48px;
min-width: 48px;
overflow: visible;
border-radius: 25px;
transform: scale3d(1,1,1);
-webkit-transform: scale3d(1,1,1);
}
.card {
transform: scale3d(7,10,1);
-webkit-transform: scale3d(7,10,1);
border-radius: 1px;
box-shadow: 0 3px 4px rgba(0,0,0,0.3);
}
/* Buttton Style */
.btn{
color: #2196F3;
background-color: #FFF;
text-decoration: none;
display: flex;
text-align: center;
border-radius: 25px;
padding: 1em 5em;
overflow: visible;
border: none;
}
.circle-button{
width: 50px;
height:50px;
padding: 1em !important;
border-radius: 50%;
}
.listening{
position: relative;
}
.listening::before,
.listening::after {
content: '';
position: absolute;
top: calc(50% - 24px);
left: calc(50% - 24px);
height: 48px;
width: 48px;
pointer-events: none;
opacity: 1;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
}
.listening::before,
.listening::after {
-webkit-animation: anim-ripple 1.2s ease-out infinite forwards;
animation: anim-ripple 1.2s ease-out infinite forwards;
}
.listening::after {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
/* Player Style */
.cover{
display: none;
margin-top: -1px;
width:300px;
height:200px;
flex: none;
border-radius: 5px 5px 0 0;
}
.button--close {
position: absolute;
z-index: 10;
top: 0px;
right: 0px;
left: auto;
width: 40px;
height: 40px;
padding: 10px;
color: #eee;
pointer-events: all;
text-decoration: none;
}
.button--close:hover,
.button--close:focus {
color: #ddd;
}
.player {
position: absolute;
width:calc(50px * 7);
height:calc(50px * 10);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
pointer-events: none;
opacity: 0;
}
.player::after {
content: '';
position: absolute;
pointer-events: none;
border-radius: 5px 5px 0 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
}
.player--visible {
pointer-events: none;
-webkit-transition: opacity 0.5s linear 0.2s;
transition: opacity 0.5s linear 0.2s;
opacity: 1;
}
.player__cover {
margin-top: -1px;
width:100%;
max-height: 300px;
overflow: hidden;
border-radius: 5px 5px 0 0;
}
.player__meta {
position: absolute;
width: 100%;
bottom:20px;
padding: 0 1em 1em;
text-align: center;
}
.player__track {
font-size: 1.15em;
margin: 1.25em 0 0.05em 0;
color: #55656c;
}
.player__album {
font-size: 12px;
margin: 0;
color: #bbc1c3;
}
.player__album-name,
.player__artist {
color: #adb5b8;
}
/* Keyframes Animation */
@-webkit-keyframes anim-ripple {
0% {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale3d(3, 3, 1);
transform: scale3d(3, 3, 1);
}
}
@keyframes anim-ripple {
0% {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale3d(3, 3, 1);
transform: scale3d(3, 3, 1);
}
}
Bagian berikutnya adalah file javascript, saya akan mulai menjelaskan semua proses animasi dari file ini sehingga mudah untuk memahami seluruh proses. Sekarang buatlah file javascript baru dan beri nama index.js. Buatlah kelas baru dan tambahkan konstruktor untuk menginisialisasikan semua variabel.
'use strict';
class MorphingButton{
constructor(){
//initilize all variables
this.btn = document.querySelector('.morpher a');
this.meta = document.querySelector('.player');
this.btnClose = document.querySelector('.button--close');
this.onClick = this.onClick.bind(this);
this.onCardClose = this.onCardClose.bind(this);
//add all even listener needed
this.addEventListeners();
}
}
window.addEventListener('load',() => new MorphingButton());
Sekarang tambahkan 3 fungsi baru onClick, onCardClose dan addEventListeners di kelas sebelumnya. addEventListeners digunakan untuk menambahkan semua listener yang akan kita gunakan, onClick akan digunakan untuk mendengarkan event klik pada tombol dan onCardClose akan digunakan untuk mendengarkan klik event pada tombol tanda silang di dalam kartu padainformasi lagu.
addEventListeners(){
this.btn.addEventListener('click',this.onClick);
this.btnClose.addEventListener('click',this.onCardClose);
}
onCardClose(e){
e.preventDefault();
this.hideCard();
}
onClick(e){
e.preventDefault();
let self = this;
// start listening state
this.listening();
//simulate listening for song in 5000 miliseconds
setTimeout(function(){
// stop listening state
self.stopListening();
// show card with song information
self.showCard();
// clear current Timeout
clearTimeout(this);
},5000);
}
Pada kode di atas dalam fungsi onClick kita perlu menyimpan innstance kelas pada variabel self karena setTimeout berjalan di thread berbeda, sehingga kita tidak mungkin dapat mengakses fungsi yang ada pada kelas saat ini didalam fungsi setTimeout.
Sekarang mari kita membuat bagian animasi dan membuat 4 fungsi baru yaitu listening, stopListening, Showcard dan hideCard. Pertama mari kita mulai dengan fungsi listening dimana fungsi ini kita menambahkan kelas listening pada elemen btn, jika Anda melihat kelas listening dengan pseudo class(kelas semu) ::after dan ::before di css, saya membuat border di mana border-radius diatur ke 50% sehingga akan membuat semacam cincin di tengah layar dan menganimasikannya dengan keyframes anim-ripple di mana animasi akan selalu berjalan karena saya mengatur animation-iteration-count menjadi infinit. Pada pseudo class ::after saya mengatur penundaan selama 0,6 detik sehingga ini akan membiarkan animasi di pseudo class ::before untuk berjalan terlebih dahulu selama 0,6 detik sebelum animasi di pseudo class ::after dieksekusi.
listening(){
// add class listening to circle-button
this.btn.className += ' listening';
}
Sekarang untuk fungsi stopListening kita hanya perlu menghapus kelas listening dari tombol untuk menghentikan animasi sehingga hanya kelas circle-button yang ada dalam elemen btn.
stopListening(){
// remove the listening class from button
this.btn.className = 'circle-button';
}
Berikutnya mari kita pindah ke fungsi showCard, dalam fungsi ini saya mengubah elemen induk dari btn menjadi kartu dengan menambahkan kelas card, ada beberapa urutan transisi untuk elemen ini dan urutannya berbeda saat kartu tampil dan saat kartu disembunyikan. Pada Showcard urutan transisi pertama adalah transform kemudian diikuti dengan border-radius. Jadi border-radius akan menunggu transform untuk menyelesaikannya terlebih dahulu sebelum dieksekusi. Dalam fungsi ini kita akan menyembunyikan btn dan mengatur opacity ke 0 serta menampilkan informasi lagu dengan menambahkan kelas player–visible pada elemen meta.
showCard(){
// add transition to morpher with 100ms delay on border-radius
this.btn.parentNode.style.transition = 'border-radius 100ms linear 100ms,transform 100ms linear';
//add transtion on opacity with duration 50ms
this.btn.style.transition = 'opacity 50ms linear';
//change button opacity to 0 and hide the button
this.btn.style.opacity = 0;
// add card class to morpher to transform it from circle button to card
this.btn.parentNode.className += ' card';
// add player--visible class to show track information
this.meta.className += ' player--visible';
}
Yang terakhir adalah fungsi hideCard. Dalam fungsi ini kita akan melakukan kebalikan dari fungsi Showcard dimana kita akan mengubah kembali elemen induk dari btn ke menjadi lingkaran yang memiliki bentuk yang sama dengan elemen btn. Urutan transisinya kebalikan dari fungsi Showcard, sehingga urutan transisinya adalah border-radius pertama dan kemudian diikuti dengan transform. Setelah itu kita akan menampilkan kembali elemen btn dan menyembunyikan informasi lagu.
hideCard(){
// remove player--visible to hide the song information
this.meta.className = 'player';
// add transition to morpher with 100ms delay on transform
this.btn.parentNode.style.transition = 'border-radius 100ms linear,transform 100ms linear 100ms';
// remove card class from morpher
this.btn.parentNode.className = 'morpher';
//add transtion on opacity with duration 200ms and delay 200ms
this.btn.style.transition = 'opacity 200ms linear 200ms';
//change button opacity to 1 and show the button
this.btn.style.opacity = 1;
}
Mungkin itu saja yang dapat saya share pada postingan kali ini, untuk sourcecode dapat di download melalui Github.
