Membuat Effect Font Bergoyang dengan CSS
12/02/2018 Risman Hakim 2152 Website
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.
<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.
Baiklah, cukup sekian tutorial mengenai cara Membuat Effect Font Bergoyang dengan CSS, semoga bermanfaat dan selamat mencoba :)
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
