Membuat Animasi TEXT Slide dengan CSS - SRF Exploiter Indonesia
Beranda / CSS / TUTORIAL

Membuat Animasi TEXT Slide dengan CSS

Oleh SRF Posting Komentar


Tutorial Membuat Animasi TEXT Slide dengan CSS - SRF Exploiter Indonesia
Animasi TEXT Slide ini merupakan suatu animasi yang mempunyai pola gerakan atau perubahan suatu text dari kiri ke kanan ataupun sebaliknya.
Pada tutorial ini banyak yang digunakan pada konten yang contohnya Gambar , Text , Dan lainnya.
Ada berbagai cara untuk membuat animasi text pada website atau blog.
jQuery/JS dan CSS Ialah salah satu contoh bahasa script untuk membuat Animasi TEXT Slide.
Dan kali ini admin bakal membagikan tutorial cara membuat TEXT Slide yang dibantu oleh sintaks CSS.
Penasaran dengan cara pembuatanya? Simak tutorialnya di
Membuat Animasi TEXT Slide dengan CSS Seperti berikut ini.

Langkah pertama : Membuat Animasi TEXT Slide dengan CSS

Langkah pertama untuk membuat TEXT Slide kita akan membuat struktur HTML Sederhana terlebih dahulu untuk TEXT Animasinya.
Ketik atau salin code berikut ini.


<body>
    <span class="text srf">SRF</span>
    <span class="text ei">Exploter Indonesia.</span>
</body>


Langkah ke 2 : Membuat Animasi TEXT Slide dengan CSS

Langkah berikutnya setelah selesai membuat struktur atau code seperti diatas, Barulah kita akan mendesain tampilan textnya dan juga Membuat animasi TEXT Slide dengan memerlukan bantuan properti CSS Yaitu KeyFrame.
Silakan kalian Ketik atau salin code CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaijaan');
* {padding: 0; margin: 0;}
body {
    font-family: 'Baloo Bhaijaan', cursive;
    color: #0984e3;
      background-color:#f5f6fa;
}
.text {
    font-size: 95px;
    padding: 0 35px;
    float: left;
    margin-top: 20px;
}
.srf {
    background-color: #0984e3;
    color: #f5f6fa;
    border-radius: 0 85px 85px 0;
}
.ei {
    color: #0984e3;
}
.text {
    animation-name: slide;
    animation-duration: 4s;
}
@-webkit-keyframes slide {
    0% { opacity: 0; margin-left: -250px; }
    100% { opacity: 1; margin-left: 0; }
}
@keyframes slide {
    0% { opacity: 0; margin-left: -250px; }
    100% { opacity: 1; margin-left: 0; }
}

Setelah semua sintaks HTML Dan juga CSS diatas telah diketik atau di salin , Silakan kalian simpan filenya dan kemudian buka pada brosernya masing - masing untuk melihat hasil akhirnya.
Berikut Contoh hasilnya
Gimana gan, Cukup mudah kan ? Okelah cukup sekian artikel CSS mengenai Membuat Animasi TEXT Slide dengan CSS .
Terimakasih  dan jangan lupa untuk lihat artikel lainnya tentang CSS.
Kalau kamu suka dengan artikel ini silakan kamu share artikel ini. dan bila ada kesalahan pengetikan,Kritik,Saran . Silakan kamu komentar dibawah yaa . Semoga bermanfaat :)

Tidak ada komentar untuk "Membuat Animasi TEXT Slide dengan CSS"

Posting Komentar