Membuat Equalizer Bar Animation HTML CSS

Sharing Teknologi – Membuat Equalizer Bar Animation Effect HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Equalizer Bar Animation HTML CSS Di WordPress. 

CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mengendalikan tampilan dan desain elemen dalam dokumen HTML. Dengan CSS, pengembang web dapat mengubah warna, ukuran, tata letak, dan jenis huruf halaman secara terpusat.

Ini memisahkan konten dari presentasi, memungkinkan tampilan yang konsisten di seluruh situs web. Dengan aturan yang berlapis-lapis, CSS dapat diwariskan dari elemen induk ke anak, memungkinkan gaya yang seragam dan mudah dipelihara. CSS juga mendukung responsivitas, memungkinkan desain yang lebih baik pada perangkat yang berbeda.

CSS3 adalah versi terbaru dari CSS, yang memperkenalkan berbagai fitur baru dan peningkatan. Ini termasuk efek transisi dan transformasi, border-radius, gradient, animasi, dan banyak lagi. CSS3 juga mendukung media query untuk desain responsif, fleksibilitas tata letak, dan kemampuan pemilihan berdasarkan negasi (pseudo-class). Dengan kemampuannya yang lebih kuat dan fitur-fitur inovatif, CSS3 memberikan pengembang web lebih banyak kreativitas dan fleksibilitas untuk menciptakan tampilan yang menarik dan dinamis.

Namun, penggunaan CSS3 perlu diperhatikan kompatibilitasnya dengan browser lama, sehingga pengembang sering menggabungkannya dengan CSS reguler sebagai langkah peningkatan dan pemeliharaan yang lebih halus.

HTML (HyperText Markup Language) adalah bahasa pemrograman yang digunakan untuk membuat dan memformat halaman web. Dengan menggunakan tag-tag khusus, HTML memungkinkan pengembang web untuk menentukan struktur dan tampilan konten, seperti teks, gambar, tautan, dan media lainnya. Hal ini memungkinkan pengguna web untuk melihat halaman secara terhubung melalui tautan hypertext dan menjadi fondasi dari World Wide Web.

Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi..

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Equalizer Bar Animation Menggunakan HTML CSS. 

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Equalizer Bar Animation

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan. 

Untuk contoh hasilnya ada di paling bawah ya, silakan scroll ke bawah.

HTML

<div class="position-relative p-3 my-1 overflow-hidden">
	<div class="equalizerbar">
		<div class="equalizer">
		  <span class="bar bar-1"></span>
		  <span class="bar bar-2"></span>
		  <span class="bar bar-3"></span>  
		</div>
	</div>
</div>

Style CSS

.equalizerbar {
  min-height: 400px;
  background: linear-gradient(90deg, #5f2c82 10%, #49a09d 90%);
}
.equalizerbar .equalizer {
  position: absolute;
  height: 200px;
  width: 300px;  
  top: 50%;
  left: 50%;
  margin: 0;
  float: none;
  transform: translate(-50%, -50%) scale(0.25);  
}

.equalizerbar .bar {
  width: 30%;
  height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  transition: height 0.4s ease;
  animation: bar 0.4s 0s both alternate ease infinite;
}

.equalizerbar .bar-1 {
  animation-delay: 0.2s;
}

.equalizerbar .bar-2 {
  left: 33%;
    animation-delay: 0.4s;
}

.equalizerbar .bar-3 {
  left: 66%;
    animation-delay: 0.6s;
}

@keyframes bar {
  0% {
    height: 0;
  }
  
  100% {
    height: 100%;
  }
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.