Skip to main content

Lifestyle Technology
Home

CSS HTML : Efek Animasi Bergelombang Bendera Merah Putih dan Teks Ditengah

Cak Roni
Cak Roni
0
CSS HTML : Efek Animasi Bergelombang Bendera Merah Putih dan Teks Ditengah

Membuat efek animasi bergelombang bendera merah putih dan teks bergerak menggunakan HTML dan CSS, cocok untuk header blog

Daftar isi
Baca Juga

Lihat bendera merah putih berkibar dengan efek bergelombang seperti air di header blogini? Saya baru saja bereksperimen dengan CSS dan HTML untuk menciptakan efek animasi bergelombang bendera yang bikin tampilan blog jadi lebih hidup. Ditambah dengan teks bergerak di atasnya makin mempercantik desain. Penasaran gimana caranya? Yuk, ikut saya jelajahi langkah-langkah membuatnya!

CSS HTML : Efek Animasi Bergelombang Bendera Merah Putih dan Teks Ditengah

Membuat animasi bendera yang bergelombang nggak sesulit yang kamu kira. Dengan CSS dan filter SVG, kita bisa bikin bendera merah putih yang seolah-olah bergerak seperti riak air. Saya pilih pendekatan ini karena simpel, nggak perlu JavaScript, dan hasilnya ringan untuk blog. Plus, kita bisa tambah teks yang ikut bergoyang biar lebih menarik.

Kenapa bendera merah putih? Karena bulan ini adalah bulan Agustus yang bertepatan dengan Dirgahayu Kemerdekaan Republik Indonesia ke 80 atau sudah 80 tahun Indonesia Merdeka.

Pada artikel sebelumnya, saya juga membuat animasi bendera untuk bendera Indonesia. Selain sebagai simbol kebanggaan Indonesia, warnanya yang kontras cocok banget buat eksperimen visual. Teks bergerak di atas bendera jadi elemen yang bikin pengunjung langsung notice.

Di sini, saya bakal ajak kamu bikin efek ini dari nol. Kita pakai filter SVG untuk gelombang, pseudo-element untuk bendera dan teks, plus sedikit trik CSS biar semuanya rapi. Nggak perlu khawatir kalau kamu pemula, soalnya saya akan jelasin step-by-step dengan gaya santai biar gampang dipahami.

Mengapa Efek Gelombang?

Efek gelombang punya daya tarik tersendiri. Gerakannya yang lembut bikin tampilan web terasa dinamis tanpa berlebihan. Saya suka pakai filter SVG karena bisa menciptakan riak seperti air tanpa kode rumit. Cocok banget buat header yang ingin kelihatan modern tapi nggak ganggu konten utama.

Alat yang Kita Butuhkan

Sebelum mulai, kita cuma butuh dua hal: HTML untuk struktur dan CSS untuk gaya serta animasi. SVG akan kita gunakan untuk efek gelombang, tapi tenang, ini nggak serumit kedengerannya. Untuk browser seperti seperti Chrome atau Firefox udah mendukung filter SVG, jadi hasilnya bakal mulus.

  • HTML Dasar

    Struktur sederhana dengan elemen header dan SVG untuk filter.

  • CSS dan SVG

    Pakai filter SVG seperti feTurbulence dan feDisplacementMap untuk efek riak.

  • Pseudo-element

    Gunakan ::before untuk bendera dan ::after untuk teks biar terpisah dari konten.

Langkah Membuat Animasi Bendera

Pertama, saya menggunakan struktur HTML untuk header blog untuk dipasang animasi bendera ini. Saya pakai elemen header dengan kelas "fixd-header flag".

Di dalamnya, ada menu dan kolom pencarian sebagai contoh konten. SVG diletakkan di luar header untuk definisi filter gelombang. Ini penting biar nggak konflik dengan SVG lain di template blog kamu.

Kalau kalian ingin memasangnya, pastikan elemen atau bagian apa yang ingin diberikan efek animasi bendera bergelombang ini. Sesuaikan sesuai penggunaanya.

Untuk bendera, saya gunakan pseudo-element ::before pada .flag. Background-nya pakai linear-gradient untuk warna merah putih, ditambah filter SVG biar bergelombang. Saya juga kasih efek transparan di sisi kanan dengan mask-image supaya kelihatan lebih lembut dan nggak kaku.

Kode HTML dan CSS untuk Efek Animasi

Berikut kode lengkap untuk bikin efek animasi bergelombang bendera merah putih dengan teks bergerak. Saya taruh di fixed-header setinggi 60px, dengan teks "80 Tahun Indonesia Merdeka" yang bergelombang dan bergerak dari kiri ke kanan, diposisikan di tepi atas header.

Kode CSS Animasi Bendera Bergelombang

Dibawah ini adalah kode CSS utama untuk animasi bendera berkibar atau bergelombang yang bisa digunakan dibagian elemen blog yang kalian inginkan.


    .flag::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 90px;
      background: linear-gradient(to bottom, #ff0000 50%, #ffffff 50%);
      filter: url(#flag-wave);
      -webkit-mask-image: linear-gradient(to right, #fff 70%, transparent 100%);
      mask-image: linear-gradient(to right, #fff 70%, transparent 100%);
      z-index: 0; /* Bendera paling belakang */
    }

    .flag::after {
      content: '80 Tahun Indonesia Merdeka';
      position: absolute;
      top: 5px; /* Posisi tepi kiri atas header */
      left: 0;
      width: 100%;
      font-family: Arial, sans-serif;
      font-size: 50px; /* Ukuran teks besar */
      font-weight: bold;
      color: #fff;
      opacity: 0.5; /* Efek samar */
      z-index: 1; /* Teks di atas bendera, di bawah menu */
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      filter: url(#text-wave); /* Efek gelombang untuk teks */
      animation: slide-right 16s linear infinite; /* Kecepatan animasi kiri ke kanan */
      white-space: nowrap;
      line-height: 60px; /* Menyesuaikan tinggi header */
    }

    @keyframes slide-right {
      0% {
        transform: translateX(-100%); /* Mulai dari sisi kiri layar */
      }
      100% {
        transform: translateX(100vw); /* Bergerak ke sisi kanan layar */
      }
    }

    svg.flag-svg {
      position: absolute;
      width: 0;
      height: 0;
    }

Cara Memasang Kode CSS

Jika kamu ingin memasang animasi bendera ini dibagian header, maka tambahkan class elemen header pada kode class .flag atau jika ingin menambahkan animasi ini ditempat lain, pastikan kode class .flag tetap berada pada class elemen tersebut

Kode HTML


 <svg class="flag-svg">
    <defs>
      <!-- Filter untuk bendera -->
      <filter id="flag-wave" x="-50%" y="-50%" width="200%" height="200%">
        <feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="4" result="turbulence">
          <animate attributeName="baseFrequency" from="0.015" to="0.025" dur="4s" repeatCount="indefinite" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"/>
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="25" xChannelSelector="R" yChannelSelector="G"/>
      </filter>
      <!-- Filter untuk teks -->
      <filter id="text-wave" x="-50%" y="-50%" width="200%" height="200%">
        <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" result="turbulence">
          <animate attributeName="baseFrequency" from="0.02" to="0.03" dur="3s" repeatCount="indefinite" calcMode="spline" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"/>
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="15" xChannelSelector="R" yChannelSelector="G"/>
      </filter>
    </defs>
  </svg>
  <header class="header-wrapper headerlogo flag">
    <!-- Contoh konten header -->
    <div class="menu">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </div>
    <div class="search">
      <input type="text" placeholder="Search...">
    </div>
  </header>

Cara Memasang Kode CSS

Seperti penjelasan saya sebelumnya, untuk memasang efek animasi bendera ini, sesuaikan dengan bagian elemen class yang ingin dipasang animasi ini. Disini saya contohkan bagian fixed-header blog ini.

Elemen fixed-header di blog ini adalah elemen bagian header dan sudah terpasang animasi bendera mrah putih seperti yang terlihat dibagia atas blog ini.

Untuk memasang kode css kedalam template blog kamu, berikut caranya:

  • Buka Pengaturan Tema

    Di dashboard Blogger, klik Tema, lalu pilih Edit HTML. Cari tag <style> atau <head> di kode tema atau kumpulan kode CSS didalam kode template blog kamu.

  • Salin Kode CSS

    Salin kode CSS diatas. Tempel di dalam tag <style> atau sebelum </head> dan tambahkan kode class elemennya.

    Jadi kode utamanya kan .flag jika kamu memasang animasi ini dibagian header maka tambahkan kode class .header sebelum class .flag sehingga hasilnya akan menjadi seperti ini .header.flag

  • Sesuaikan Gaya

    Jika kamu memasang animasi ini dibagian header, ubah warna atau padding untuk class .headerlogo, .menu, atau .search agar cocok sama tema blog kamu, terutama untuk warna font dan warna background. Simpan perubahan.

Kalau mau animasi di tempat lain, tambahin kelas flag ke elemen HTML yang kamu mau, misalnya di widget. Pastikan elemennya punya tinggi 60px atau sesuaikan dengan keinginan kamu.

Cara Memasang Kode HTML

Sekarang kita pasang kode HTML biar bendera merah putih bergelombang dengn teks "80 Tahun Indonesia Merdeka"!

  • Tambah class ke Header

    Buka Tema > Edit HTML. Cari elemen <header> atau <div id='header'>. Misalkan contohnya adalah fixed-header maka tambahin class HTML dari <div class='fixed-header'> jadi <div class='fixed-header flag'>.

  • Pasang Kode HTML

    Salin kode HTML <svg class='flag-svg'> sebelum <div class='fixed-header flag'>. Atau tempel di bawah tag <body> atau di widget HTML via Tata Letak.

  • Tambah ke Widget

    Kalau nggak mau di header, buka Tata Letak, tambah Gadget HTML/JavaScript, lalu tempel kode <svg> dan <div class="header-wrapper headerlogo flag">.

CSS HTML Ada di Codepen

Kalau ingin mencoba animasi ini, silahkan utak atik kodenya yang ada di Codepen dibawah ini:

See the Pen Efek Animasi Bergelombang Bendera Merah Putih dan Teks Ditengah by Sahroni (@digitalpoin) on CodePen.

Setelah simpan, cek blog kamu. Bendera bakal bergoyang halus dengan teks besar 50px meluncur dari kiri. Kalau mau ubah, coba atur kecepatan teks atau posisi yang ada di kolom CSS diatas! Selamat mencoba

Tags:
  • Berkomentarlah dengan bijak karena banyak komentar yang masuk kedalam spam
  • Memasang link aktif didalam komentar akan membuat komentar Anda masuk kedalam Spam dan tidak akan tampil.

Artikel Terbaru

Baca Juga Artikel Lainya: