Membuat Text Background Animation Menggunakan CSS

Profile
Afrizal Mufriz Fouji•

13 Agustus 2024

Membuat Text Background Animation Menggunakan CSS

Dalam dunia web desain, teks bukan hanya sekadar kata-kata di layar. Teks bisa menjadi elemen visual yang menarik perhatian dan menambah kesan profesional pada halaman web. Salah satu cara untuk membuat teks lebih menarik adalah dengan menambahkan animasi. Dengan sedikit sentuhan CSS, kita bisa mengubah teks yang biasa menjadi sesuatu yang lebih hidup dan dinamis.

Di tutorial ini, kita akan belajar bagaimana membuat animasi teks dengan efek gambar latar yang bergerak dan warna yang berubah-ubah. Efek seperti ini biasanya terlihat pada situs web modern untuk memberikan sentuhan interaktif dan estetika yang lebih menonjol. Tidak perlu khawatir jika kalian baru belajar CSS, karena langkah-langkah di tutorial ini dijelaskan dengan sederhana dan bisa diikuti siapa saja.

Animasi teks yang akan kita buat ini menggunakan CSS murni, tanpa memerlukan JavaScript sama sekali. Ini artinya, animasi yang kita buat akan berjalan lebih ringan dan cepat di browser. Selain itu, kalian bisa dengan mudah menyesuaikan animasi ini sesuai kebutuhan dan selera masing - masing.

Siapkan editor kodenya, dan mari kita mulai membuat teks yang tidak hanya bisa dibaca, tetapi juga bisa membuat pengunjung website kalian takjub dengan animasi ini!

Langkah 1: Siapkan Struktur HTML

Pertama, kita buat dulu struktur HTML sederhana sebagai tempat untuk menampilkan teks yang akan dianimasikan. Contohnya seperti ini:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Tutorial Word Text Animation</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Word <span class="word-animation">Animation.<span></h1>
  </body>
</html>

Di sini, kita bikin elemen <h1> dengan kelas word-animation. Nah, nanti teks ini yang akan kita tambahkan efek animasinya.

Langkah 2: Tambahkan CSS untuk Animasi

Setelah HTML-nya siap, kita tambahkan CSS yang akan mengatur animasi teks. Buat file styles.css dan masukkan kode berikut:

.word-animation {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-left: -5px;
  padding-right: 5px;
}

.word-animation {
  background-color: hsl(var(--foreground));
  background-image: url("../public/abstract.jpg"),
    url("../public/abstract.jpg");
  background-repeat: repeat;
  background-size: 2048px;

  -webkit-animation: 72s diagonal-flow infinite linear,
    23s hue-rotate infinite linear;
  animation: 72s diagonal-flow infinite linear, 23s hue-rotate infinite linear;
}

@keyframes diagonal-flow {
  0% {
    background-position: 100px 100px;
  }
  100% {
    background-position: -5020px 4196px;
  }
}

@keyframes hue-rotate {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
  50% {
    -webkit-filter: hue-rotate(-60deg);
    filter: hue-rotate(-60deg);
  }
  100% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
}

@-webkit-keyframes diagonal-flow {
  0% {
    background-position: 100px 100px;
  }
  100% {
    background-position: -5020px 4196px;
  }
}

@-webkit-keyframes hue-rotate {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
  50% {
    -webkit-filter: hue-rotate(-60deg);
    filter: hue-rotate(-60deg);
  }
  100% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
}

Nah, supaya lebih jelas, kita bahas sedikit bagian-bagian penting dari CSS ini:

1. Bikin Teks Transparan dan Potong Background

Di bagian ini, kita bikin teks jadi transparan dan cuma gambar latar yang kelihatan di area teks.

.word-animation {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-left: -5px;
  padding-right: 5px;
}
  • color: transparent; Ini bikin teks jadi transparan.
  • -webkit-text-fill-color: transparent; Buat browser Safari atau yang berbasis WebKit, ini supaya teks bener-bener transparan.
  • background-clip: text; Gambar latar cuma kelihatan di area teks.
  • padding-left: -5px; padding-right: 5px; Sedikit geser posisi teks biar tampilannya lebih pas.
2. Tambahkan Gambar Latar dan Efek Animasi

Selanjutnya, kita tambahkan gambar latar dan efek animasi pada teks.

.word-animation {
  background-color: hsl(var(--foreground));
  background-image: url("../public/abstract.jpg"),
    url("../public/abstract.jpg");
  background-repeat: repeat;
  background-size: 2048px;

  -webkit-animation: 72s diagonal-flow infinite linear,
    23s hue-rotate infinite linear;
  animation: 72s diagonal-flow infinite linear, 23s hue-rotate infinite linear;
}
  • background-image: url("../public/abstract.jpg"); Ini gambar yang kita pakai buat latar teks.
  • background-repeat: repeat; Supaya gambar diulang-ulang kalau ukurannya lebih kecil dari area teks.
  • animation: Ada dua animasi yang dipakai:
    • diagonal-flow: Gambar latar bergerak secara diagonal.
    • hue-rotate: Warna gambar berubah-ubah.
3. Animasi Pergerakan Diagonal

Animasi ini bikin gambar latar bergerak dari satu sudut ke sudut lainnya secara diagonal.

@keyframes diagonal-flow {
  0% {
    background-position: 100px 100px;
  }
  100% {
    background-position: -5020px 4196px;
  }
}
  • background-position: Mengatur posisi gambar latar dari (100px, 100px) ke (-5020px, 4196px) buat bikin efek gerakan.
4. Animasi Perubahan Warna (Hue-Rotate)

Animasi ini bikin warna gambar latar berubah secara perlahan.

@keyframes hue-rotate {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
  50% {
    -webkit-filter: hue-rotate(-60deg);
    filter: hue-rotate(-60deg);
  }
  100% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
}
  • filter: hue-rotate(0deg); Mulai dari warna asli.
  • filter: hue-rotate(-60deg); Warna gambar berputar (hue) sebesar -60 derajat.
5. Versi WebKit dari Animasi

Supaya animasi jalan di browser berbasis WebKit (kayak Safari), tambahin versi prefiks -webkit- dari animasi:

@-webkit-keyframes diagonal-flow {
  0% {
    background-position: 100px 100px;
  }
  100% {
    background-position: -5020px 4196px;
  }
}

@-webkit-keyframes hue-rotate {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
  50% {
    -webkit-filter: hue-rotate(-60deg);
    filter: hue-rotate(-60deg);
  }
  100% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
}
Langkah 3: Tambahkan Gambar Latar

Pastikan kamu punya gambar abstract.jpg yang mau dipakai buat latar belakang teks. Simpan gambar ini di dalam folder public di proyek kamu. Kalau foldernya belum ada, buat dulu ya.

Langkah 4: Lihat Hasilnya

Sekarang coba buka file HTML kamu di browser. Kamu bakal lihat teks "Animasi Teks" dengan gambar latar yang bergerak diagonal dan warna yang berubah-ubah secara halus.

Kesimpulan

Dengan CSS, kita bisa membuat animasi teks yang menarik tanpa perlu bantuan JavaScript. Efek seperti ini dapat memberikan sentuhan interaktif dan estetika yang lebih dinamis pada halaman web kalian. Setelah mempelajari langkah-langkah di tutorial ini, kalian bisa bereksperimen lebih jauh dengan mengubah durasi, arah gerakan, atau warna untuk menciptakan efek animasi yang sesuai dengan kebutuhan dan gaya desain Anda.

Jika kamu ingin mencoba langsung atau mengembangkan lebih lanjut kode yang telah kita bahas, Kamu bisa mencobanya di CodeSandbox. Klik tombol di bawah ini untuk membuka project ini dan bereksperimen dengan kodenya:

Edit word-text-animation

Selamat mencoba! Semoga bermanfaat!

Share:

Tags:

What do you think?

Reactions

Baca Artikel Lainnya

Membuat Text Background Animation Menggunakan CSS
Membuat Text Background Animation Menggunakan CSS
13 Agustus 2024