Membuat Floating Action Button dengan CSS & JavaScript

Membuat Floating Action Button dengan CSS & JavaScript

Membuat Floating Action Button dengan CSS & JavaScript
Membuat Floating Action Button dengan CSS & JavaScript


Cara Membuat Circular Floating Action Button dengan CSS & JavaScript, Apa itu Floating Action Button (FAB) yaitu merupakan sebuah tombol yang berbentuk lingkaran dan ditampilkan seperti melayang, kalian sendiri udah pada gede juga pasti sudah paham dong dengan melihat thumbnail nya saja, nah karena banyak nya penggunaan fitur FAB ini di android, apa salahnya jika kita menerapkan nya pada website kita?, tidak ada yang salah, nah maka dari itu admin akan memberikan Cara Membuat Circular Floating Action Button pada website dengan menggunakan CSS & JavaScript.

Hari ini Kalian akan belajar membuat Floating Actions Widget. Pada dasarnya ada gambar berbentuk lingkaran dengan tombol. Kemudian tombol berisi ikon '+' ketika kalian akan mengkliknya 3 item akan tampil di jalur perbatasan lingkaran. Dengan kata lain, Semua tombol ini akan terbuka dalam lintasan melingkar. Setelah mengklik semua item, maka ikon '+' menjadi ikon silang / close. Setelah kalian mengklik itu, semua item akan bersembunyi lagi dengan animasi yang sama pada saat sebelum di klik.

Nah jika kalian tertarik tapi masih bingung seperti apa itu Floating Action Button, kalian bisa melihat preview dibawah ini, dan tentunya dengan source code yang sudah admin sediakan.


Membuat Circular Floating Action Button dengan CSS & JavaScript

Pertama admin telah membuat tag div utama dengan nama kelas 'main-wrapper' dan meletakkan semua item di dalamnya. Sekarang di dalam tag div utama, admin telah menempatkan gambar, ikon untuk add dan cross, dan 3 ikon lainnya. Semua ikon ini berbentuk circular, di file HTML , admin telah menautkan file lain seperti CSS dan JavaScript.

admin menggunakan CSS untuk menempatkan semua item di tempat yang tepat, seperti yang kalian lihat di preview. Dengan CSS pertama admin memberikan nilai dasar seperti ukuran, posisi, margin, padding, dll untuk semua elemen. Di sana admin telah menggunakan perintah tampilan untuk membuat tata letak. Dan admin telah menggunakan perintah transformasi CSS untuk membuat perintah transformasi dan transisi untuk animasi.

JavaScript di sini menganimasikan dan menyembunyikan fitur dalam program ini. Di sana admin menggunakan .querySelector untuk mengambil elemen dan disimpan dalam variabel. admin menggunakan if { } else { } pernyataan untuk menyatakan kondisi. Juga digunakan untuk loop untuk  perintah { } menjalankan kondisi untuk mengakhiri panjang.

kalian akan mengerti setelah mendapatkan kode , admin tidak bisa menjelaskan semuanya secara tertulis. Untuk membuat program ini, kalian harus membuat 3 file. File pertama untuk HTML , kedua untuk CSS , dan file ketiga untuk JavaScript . Ikuti langkah-langkah untuk membuat program ini tanpa kesalahan.

Buat file HTML bernama index.html dan masukkan kode-kode ini di bawah ini.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Circular Floating Action | RuangCoder.com</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="main-wrapper">
  <div class="button">
    <i class="material-icons">add</i>
  </div>
  <div class="main-wrapper-inside">
    <img src="https://image.flaticon.com/icons/png/512/48/48674.png">
  </div>
  <div class="button-wrapper first">
    <div class="button-inside first">
      <i class="material-icons">chat</i>
    </div> 
  </div>
  <div class="button-wrapper second">
    <div class="button-inside second">
      <i class="material-icons">phone</i>
    </div> 
  </div>
  <div class="button-wrapper third">
    <div class="button-inside third">
      <i class="material-icons">videocam</i>
    </div> 
  </div>
</div>

<script  src="function.js"></script>

</body>
</html>

Sekarang buat file CSS bernama style.css dan masukkan kode-kode ini di sini.

* {
  box-sizing: border-box;
  user-select: none;
}

html {
  height: 100%;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: rgba(225, 225, 225, 0.67);
}

.material-icons {
  color: #fff;
  font-size: 34px;
}

.button-inside .material-icons {
  font-size: 16px;
}

.main-wrapper {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.main-wrapper-inside {
  width: 200px;
  height: 200px;
  position: relative;
}

.button {
  border-radius: 50%;
  width: 58px;
  height: 58px;
  background-color: #ff0033;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 6;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  -webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); 
          transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); 
  box-shadow: -1px 2px 12px rgba(0, 0, 0, 0.4);
  will-change: transform;
}

.button .material-icons {
  -webkit-transition: transform 200ms cubic-bezier(0.19, 1, 0.22, 1); 
          transition: transform 200ms cubic-bezier(0.19, 1, 0.22, 1); 
  will-change: transform;
  transform-origin: center center;
}

.button.animation {
  background-color: #ff0029;
}

.button.animation .material-icons {
  -webkit-transform: rotate(-45deg) translateZ(0);
          transform: rotate(-45deg) translateZ(0);
}

.button-wrapper {
  width: 200px;
  height: 200px;
  position: absolute;
  border-radius: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: transform 400ms cubic-bezier(0.07, 1.1, 0.28, 1.01);
          transition: transform 400ms cubic-bezier(0.07, 1.1, 0.28, 1.01);
  will-change: transform;
}

.button-wrapper.animation {
  -webkit-transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}

.button-wrapper.first.animation {
  transform: rotate(-36deg) translateZ(0);
}

.button-wrapper.second.animation {
  transform: rotate(-68deg) translateZ(0);
}

.button-wrapper.third.animation {
  transform: rotate(-100deg) translateZ(0);
}

.button-inside {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  position: absolute;
  bottom: 3px;
  right: 3px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  cursor: pointer;
}

.button-inside.first {
  background-color: #ff0033;
  transform: rotate(36deg);
}

.button-inside.second {
  background-color: #ff0033;
  transform: rotate(68deg);
}

.button-inside.third {
  background-color: #ff0033;
  transform: rotate(100deg);
}

Langkah terakhir, buat file JavaScript bernama function.js dan masukkan kodenya.

var btn = document.querySelector('.button');
var buttonWrapper = document.querySelectorAll('.button-wrapper');

btn.addEventListener('click', function(){
  
  if(btn.classList.contains('animation')) {
    btn.classList.remove('animation');
  } else {
    btn.classList.add('animation');
  }
  
  for (i = 0; i < buttonWrapper.length; i++ ) {
    if(buttonWrapper[i].classList.contains('animation')){
      buttonWrapper[i].classList.remove('animation');   
    } else {
      buttonWrapper[i].classList.add('animation');
    }  
  }
  
});

Penutup


Nah sampai disini kalian telah berhasil Membuat Circular Floating Action Button dengan CSS & JavaScript mungkin artikel nya sampai sini saja, semoga bermanfaat buat kalian semua, dan terimakasih sudah berkunjung, dan jangan bosan - bosan untuk berkunjung

Anda mungkin menyukai postingan ini