Membuat Effect Font Bergoyang dengan CSS

Membuat Effect Font Bergoyang dengan CSS - Effect maupun animasi pada website adalah hal yang harus diperhatikan dalam mendesain tampilan, karena dengan tambahan effect dan animasi maka tampilan website akan terasa lebih interaktif dan cenderung tidak kaku. Banyak sekali bahasa program yang bisa kita gunakan dalam membuat effect dan animasi, misalnya saja jQuery yang sangat familiar dan CSS cukup mudah untuk membuat suatu effect, tentu banyak pula objek yang bisa kita jadikan sebagai effect dan animasi dalam sebuah website.
Berbicara mengenai effect ataupun animasi, banyak sekali tutorial - tutorial yang bisa kita pelajari untuk membuat effect dan animasi pada website. DUMET School telah banyak sekali berbagi tutorial didalam blognya, didalamnya kalian bisa mempelajari berbagai macam tutorial dan artikel lainnya yang bisa kalian pelajari. Termasuk artikel kali ini yang akan saya bagikan yaitu tutorial mengenai effect dimana kita akan memperaktekan Membuat Effect Font Bergoyang dengan CSS. Baik langsung saja kita mulai praktek Membuat Effect Font Bergoyang dengan CSS berikut ini.

Langkah 1 : Membuat Effect Font Bergoyang dengan CSS

Seperti biasa, sebelum membuat effect fontnya kita akan membuat struktur awal dengan sintak HTML berikut ini. Dan menentukan objek yang akan dijadikan effect, dalam hal ini adalan font sebagai objek untuk effect nya.

<body>
    <div id="wrapper">
      <div id="animate1" class="animate">D</div>
      <div id="animate2" class="animate">U</div>
      <div id="animate3" class="animate">M</div>
      <div id="animate4" class="animate">E</div>
      <div id="animate5" class="animate">T</div>
      <div id="animate6" class="animate"> </div>
      <div id="animate7" class="animate">S</div>
      <div id="animate8" class="animate">C</div>
      <div id="animate9" class="animate">H</div>
      <div id="animate10" class="animate">O</div>
      <div id="animate11" class="animate">O</div>
      <div id="animate12" class="animate">L</div>
      <div id="animate13" class="animate">.</div>
    </div>
</body>

Langkah 2 : Membuat Effect Font Bergoyang dengan CSS

Langkah berikutnya dalam membuat effect pada font, tentu kita akan butuh sintak CSS untuk membuat fungsi effect terhadap font. ketikan sintak CSS berikut untuk membuat fungsi effect.

@import url('https://fonts.googleapis.com/css?family=Bungee+Shade');
* {margin: 0; padding: 0;}
body {
    white-space: pre;
    font-family: 'Bungee Shade', cursive;
    color: #4E2008;
}
body {background: #F3F2DE; height: 100%;}
#wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.animate {
    font-size: 100px;
    margin: 0 5px;
    transform-origin: center;
    transform: translateX(15px);
}

#animate1 {animation: spin 3s infinite 100ms linear, appear 2s;}
#animate2 {animation: spin 3s infinite 225ms linear, appear 2s;}
#animate3 {animation: spin 3s infinite 350ms linear, appear 2s;}
#animate4 {animation: spin 3s infinite 475ms linear, appear 2s;}
#animate5 {animation: spin 3s infinite 600ms linear, appear 2s;}
#animate6 {animation: spin 3s infinite 725ms linear, appear 2s;}
#animate7 {animation: spin 3s infinite 850ms linear, appear 2s;}
#animate8 {animation: spin 3s infinite 975ms linear, appear 2s;}
#animate9 {animation: spin 3s infinite 1100ms linear, appear 2s;}
#animate10 {animation: spin 3s infinite 1225ms linear, appear 2s;}
#animate11 {animation: spin 3s infinite 1325ms linear, appear 2s;}
#animate12 {animation: spin 3s infinite 1425ms linear, appear 2s;}
#animate13 {animation: spin 3s infinite 1525ms linear, appear 2s;}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg) translateX(15px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(15px) rotate(-360deg);
  }
}

Setelah semua sintak telah diketikan, simpan filenya kemudian lihat hasilnya pada browser masing - masing.

Membuat Effect Font Bergoyang dengan CSS

Baiklah, cukup sekian tutorial mengenai cara Membuat Effect Font Bergoyang dengan CSS, semoga bermanfaat dan selamat mencoba :)

12 Februari 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat