Cara Membuat Efek Slide Teks

20/11/2019    Risman Hakim    53     Website

Cara Membuat Efek Slide Teks - Saat ini banyak sekali kreasi efek dan animasi sederhana yang bisa kita buat dengan CSS, misalnya efek teks, efek warna dan yang lainnya. Nah, pada kesempatan ini saya akan berbagi tutorial CSS sederhana tentang bagaimana Cara Membuat Efek Slide Teks. Buat teman - teman yang ingin mencoba membuatnya silahkan bisa mengikuti langkah - langkahnya berikut ini.

1. Sintak HTML

Baik, langkah pertama untuk membuat efek slide teks adalah menentukan objek yang akan dikenai efek dalam kasus ini tentu teks yang akan kita kenai efek slide, silahkan teman - teman bisa ketikan sintak HTML untuk membuat struktur sederhana dan teksnya.

<body>
    <span class="content">
        <span class="txt">DUMET<span class="sch">School.</span></span>
        <span class="filter"></span>
    </span>
</body>

2. Sintak CSS

Setelah membuat struktur dan teks seperti diatas, langkah selanjutnya adalah mendesain dan membuat efek slide teksnya. Untuk membuat efek slide kita akan membuatnya dengan sintak CSS, silahkan ketikan sintak CSS untuk membuat efek slide teksnya berikut ini.

@import url('https://fonts.googleapis.com/css?family=Fredericka+the+Great&display=swap');
body {background-color: #F7F7ED}
.content {
    display: inline-block;
    margin-top: 100px;
    overflow: hidden;
    position: relative;
}
.filter {
    animation: filter;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    background-color: #6F7072;
    display: block;
    height: 100%;
    top: 0;
    left: -100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
}
.txt {
    animation: text;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    color: #6F7072;
    font-size: 75px;
    font-family: 'Fredericka the Great', cursive;
    padding: 40px;
    opacity: 0;
    text-align: center;
}
.sch {color: #F78F20}
 @keyframes text {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
 @keyframes filter {
    0% { left: -100%; }
    50% { left: 0; }
    100% { left: 100%; }
}

Setelah semua sintak HTML dan CSS telah diketikan, langkah terakhir simpan filenya kemudian teman - teman bisa membuka pada browser masing - masing untuk melihat hasil akhir efek slide teksnya.

Bagaimana, menarik bukan efek yang ditampilkan ? Baiklah cukup sekian tutorial yang bisa saya bagikan semoga tutorial CSS ini bisa bermanfaat, selamat mencoba dan jangan pernah takut untuk mencoba :)

No data.

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