Animasi Teks Bernafas dengan CSS

Terpeka - Beberapa hari yang lalu, saya telah membuat tulisan tentang Membuat Sticky Widget di Blogger dengan javascript. Nah untuk kali ini saya akan membuat tutorial sederhana mengenai cara membuat animasi Tulisan atau Text dengan CSS.

Animasi ini cocok diterapkan pada judul atau Header Blog kamu yang tidak mau menggunakan image atau gambar. Kita tahu, dengan mengganti judul blog dengan gambar, maka akan sedikit memberatkan loading blog tersebut. Sehingga tentu saja ini menjadi masalah bagi beberapa orang yang sangat memperhatikan kecepatan blognya. Meskipun Sebenarnya masalah image ini bisa diakali dengan mengganti nya dengan SVG, namun tidak ada salahnya juga saya memberi sedikit alternatif bagi kamu yang tidak ingin blog nya bertambah berat namun tetap 'berkelas' dengan menambahkan sedikit animasi pada teks atau judul blog nya.

Cara Membuat Animasi Teks Bernafas dengan CSS

Sebenarnya Cara membuat animasi ini tidak murni menggunakan CSS, karena kita tetap membutuhkan script yang bernama

Splitting.js Meskipun file nya kecil namun yang namanya script tetap saja membutuhkan waktu untuk meloadnya.

Untuk dapat memulai membuat Animasi Teks Bernafas ini, seperti yang saya katakan sebelumnya bahwa trik ini membutuhkan script, jadi pastikan kamu mengimport script splitting tersebut. Caranya adalah :

Pertama-tama tentu saja kamu sudah harus login diblogger dan sudah berada di halaman editor template. Kemudian silahkan cari kode </body> dan pastekan kode berikut ini tepat sebelum </body> tadi.

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<script> Splitting(); </script>

Masih dalam halaman yang sama, silahkan cari </head> dan letakkan diatasnya kode berikut ini :

<style>
@font-face {
 font-family: "IBM Plex Sans Roman";
 src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/IBMPlexSansVar-Roman.ttf");
}
logo { font-family: "IBM Plex Sans Roman", Times;
    font-weight: 100;
    font-size: 10vw;
    line-height: 10vw;
    font-variation-settings: 'wght' 100, 'wdth' 85;
}

logo .char {
    --delay: calc((var(--char-index) + 1) * 400ms);
    animation: breathe 4000ms infinite both;
    animation-delay: var(--delay);
}

logo:hover span {
    animation-play-state: paused;
}

@keyframes breathe {
    0% {
        font-variation-settings: 'wght' 100, 'wdth' 85;
        font-size: 10vw;
    }
    60% {
        font-variation-settings: 'wght' 700, 'wdth' 100;
        font-size: 11vw;
    }
    
    100% {
        font-variation-settings: 'wght' 100, 'wdth' 85;
        font-size: 10vw;
    }
}
</style>

Cara Menggunakannya, cukup gunakan kode berikut ini:

<logo data-splitting>Kelasmat</logo>

Jika langkahnya sudah benar, maka hasilnya akan terlihat seperti di bawah ini:
Kelasmat

Semoga bermanfaat dan silahkan kamu kembangkan lagi sesuai kebutuhan kamu serta jika artikel ini bermanfaat silahkan bantu blog ini dengan cara bagikan keteman-teman atau media sosial kamu.