Cara Membuat Efek Slide Teks

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 :)

20 November 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat