Animasi Teks Kartun Dengan HTML CSS3 Dan Google Font

Labkom99.com – Membuat efek animasi teks kartun dengan HTML CSS3 dan Google font. Efek anamisi tesk kartun ini dibuat dengan menggunakan google font yang indah kreatif keren. Bukan tesk saja Google font yang digunakan ini juga mendukung huruf angka dan simbol. Dengan menggunkan HTML dan CSS3 warna di kombinasikan dengan Google font yang keren.

Alat / Bahan Baku

Notepad

Tools pemrograman HTML lain

Perhatian

Untuk membuat efek animasi teks kartun pada bagian ini sebaiknya memahami terlebih dahulu tentang Tutorial Belajar Dasar – Dasar HTML: Hypertext Markup Language, Struktur dasar HTML , cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah di bahas Bagaimana Cara Membuat Template HTML.

Sebelumnya Labkom99 juga sudah menuliskan beberapa artikel tentang cara membuat efek animasi dengan berbagai model dengan HTML dan CSS.

Metode / Langkah

Utuk dapat Membuat efek animasi tesk kartun dengan HTML CSS3 dan Google font langkah pertama yang dilakukan adalah menyiapkan google font yang akan digunakan

<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch:700&display=swap" rel="stylesheet">

Kemudian menyiapkan CSS3 yang akan digunakan berikut ini :

.demo{ background: #222; }
.text-effect{
    color: #ffff00;
    font-family: 'Cabin Sketch', cursive;
    font-size: 100px;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto;
    position: relative;
}
.text-effect span{
    display: inline-block;
    animation: animate 0.5s linear infinite both;
}
.text-effect span:nth-child(1),
.text-effect span:nth-child(4),
.text-effect span:nth-child(7),
.text-effect span:nth-child(10){
   color: #4cd137;
}
.text-effect span:nth-child(2),
.text-effect span:nth-child(5),
.text-effect span:nth-child(8){
   color: #ff0000;
}
@keyframes animate{
    0%, 50%, 100%{ transform: rotate(0deg) scale(1); }
    25%{ transform: rotate(4deg) scale(0.98); }
    75%{ transform: rotate(-4deg) scale(1.02); }
}
@media only screen and (max-width: 990px){
    .text-effect{ font-size: 100px; }
}
@media only screen and (max-width: 767px){
    .text-effect{ font-size: 80px; }
}
@media only screen and (max-width: 479px){
    .text-effect{ font-size: 60px; }
}
@media only screen and (max-width: 359px){
    .text-effect{ font-size: 45px; }
}

Yang harus di perhatikan dalam menggunakan CSS ini adalah penempatan warna font perhatikan pada bagian .text-effect span:nth-child(1), dan .text-effect span:nth-child(4), itu artinya jarak warna yang akan diberikan 3 huruf.

Sama halnya juga pada baris .text-effect span:nth-child(5), dan .text-effect span:nth-child(8) akan memberikan jarak warna yang sama menjadi 3 huruf. Untuk warna huruf ke 3 itu sendiri berada di .text-effect{ color: #ffff00;. Dan untuk jumlah huruf bisa kalain jumlahkan dengan rumus seperti diatas. Pada contoh kali ini menggunkan huruf L A B K O M 9 9. Untuk menulisakn huruf itu sendiri berada pada elemen HTML berikut ini :

<div class="container">
<div class="row">
    <div class="col-md-12">
        <div class="text-effect">
            <span>L</span><span>A</span><span>B</span><span>K</span>O<span>M</span><span>9</span><span>9</span>
        </div>
        <div class="text-effect">
            <span>B</span><span>E</span><span>L</span><span>A</span><span>J</span><span>A</span><span>R</span><span>H</span><span>T</span><span>M</span><span>L</span>
        </div>
    </div>
</div>
</div>

Font itu sendiri harus dituliskan tepat berada di bawah <div class=”text-effect”>. Karena fungsi inilah yang digunakan untuk membuat animasi efek pada tesk yang digunakan. Berikut ini DEMO dari kode diatas LABKOM99

Dan untuk Demo dan kode HTML lengkapnya Membuat efek animasi tesk kartun dengan HTML CSS3 dan Google font dapat dilihat seperti di bawah ini :

Pages: 1 2

Post Views: 479