SourceCode Text Animation dengan HTML dan CSS

AIsyah Farhana May 07, 2022 May 07, 2022 4 min read

Sourcecode text animation berikut sangat mudah untuk dipelajari dan dimodifikasi. Anda dapat membuatnya kembali sesuai dengan tutorial tertulis mapun tutorial video di bawah.

Selain itu, anda juga dapat mendownload sourcecode text animation pada link yang sudah tersedia. Sourcecode dapat dengan mudah dimodifikasi dengan text editor kesayangan anda.

Anda dapat memanfaatkan text editor seperti Visual Studio Code, SublimeText, Notepad++, Atom atau editor keren lainnya. untuk membuat text animation seperti ini.

Walaupun text animation ini simpel, tetapi cukup menarik untuk dijadikan bahan belajar CSS dan HTML. Sehingga dengan simple nya sourcecode berikut, akan membuat kita lebih bersemangat dalam coding aplikasi.

Dasar-dasar html dan CSS yang digunakan untuk membuat text animasi seperti ini mudah dimengerti. Anda dapat dengan mudah mempelajari text animasi dengan html dan css.

Langkah-langkah untuk membuat text animasi dengan html adalah sebagai berikut:

Daftar Isi

Pertama – Siapkan Folder dan File HTML & CSS

Seperti biasa kita siapkan folder dan file index.html serta style.css terlebih dahulu. Sehingga nampak seperti gambar di bawah ini.

Kedua – Ketikkan Kode berikut pada File index.html

Untuk membuat file html berikut sebaiknya gunakan text editor kesayangan. Karena dengan text editor yang memiliki banyak fitur, tentunya akan lebih mempercepat dan mempermudah codingan.

Sourcecode untuk file index.html sangat sederhana, silahkan perhatikan code berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Salam With Animation Effects</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2 data-text="Salam...">Salam...</h2>
</body>
</html>

Ketiga – Ketikkan Sourcecode CSS

Nah, pada file style.css yang sudah kita buat, butuh beberapa pengaturan atau code CSS seperti pada penjelasan berikut ini.

Mengimport Font Google

Agar dapat memiliki font yang sesuai, sudah barang tentu kita ambil font. Cara mengambil font yang saat ini paling mudah adalah dengan memanfaatkan google font.

Untuk mengambil google font pada CSS silahkan perhatikan contoh code berikut ini.

@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:[email protected]&display=swap');

Pengaturan Global HTML

Pada pengaturan margin, padding dan jenis font dapat diatur dengan code seperti di bawah ini.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

Mengatur Body HTML

Mengatur body html secara flex agar html ketika diload atau dibaca di berbagai macam browser dan perangkat komputer, tablet maupun HP akan menyesuaikan.

Selain itu, kita juga akan mengatur background pada body HTML. Semua settingan berikut adalah contoh, jadi anda tetap dapat mengkreasikan sendiri bentuk, warna dan jenis yang lebih anda sukai.

Sourcecode pengaturan body dengan CSS adalah sebagai berikut:

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #392525;
}

Setting Tampilan H2

Text yang akan kita berikan aninasi terletak pada tag H2, jadi kita akan mengatur komponen H2 seperti pada code berikut ini.

h2{
    position: relative;
    font-size: 14vw;
    color: #4b0101;
    -webkit-text-stroke: 0.3vw #fcf005;
    text-transform: uppercase;
}

Ukuran font, posisi dan warna kita atur pada CSS ini. Selain itu, huruf yang kita animasikan juga kita setel menjadi semuanya menjadi huruf kapital/ huruf besar.

Kalau anda tidak menginginkan merubah menjadi huruf besar, tinggal jadikan code text-transform menjadi comment atau hapus saja.

Efek H2 sebelum Animasi

Selanjutnya kita perlu memberikan pra efek animasi pada tag H2. Lebih jelasnya silahkan lihat pada sourcecode berikut ini.

h2::before{
    content:attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    color: #03e37b;
    -webkit-text-stroke: 0vw #fcf005;
    border-right: 2px solid #03e37b;
    overflow: hidden;
    animation: animate 6s linear infinite;
}

Efek Animasi Tulisan

Nah, langkah terakhir adalah CSS kita atur untuk menjalankan animasi. Sourcecodenya adalah sebagai berikut.

@keyframes animate{
    0%,10%,100%{
        width: 0;
    }
    70%,90%{
        width: 100%;
    }
}

Video Tutorial Membuat Animasi Tulisan

Agar anda lebih mudah mempelajari langkah-langkah membuat animasi tulisan dengan HTML dan CSS. Berikut ini kami sertakan video tutorial. Pada deskripsi video tutorial juga kami semetkan password sourcecodenya.

Silahkan disimak dengan seksama langkah-langkah pembuatan animasi text berikut.

Download SourceCode Text Animation

Jika anda ingin langsung memodifikasi file yang sudah ada, silahkan unduh sourcecode berikut ini. Akan tetapi, lebih baik anda mengikuti langkah demi langkah pembuatan text animasi agar lebih faham dan mengerti penggunaan HTML dan CSS untuk membuat animasi text.

Demikianlah cara dan sourcecode text animation, semoga dapat mempermudah pemahaman kita betapa mudah dan indahnya HTML dan CSS.