Cara Membuat RollIn Content Dengan CSS
Halo teman – teman, apa kabar semuanya. Pastinya bagus – bagus saja kan?
Yak, jumpa lagi dengan saya di panduan Source Code Aplikasi. Di artikel kali ini saya akan memberikan tips dan trik mengenai Cara Membuat RollIn Content Dengan CSS, dimana rollin ini berfungsi bagi mendukung tampilan blog lebih menarik dengan animation css. Kali ini kita akan merancang sebuah content dan content tersebut kita akan berikan guna rollin dengan menggunakan @keyframes, animation dan transform. Di masing – masing style tersebut di dalamnya kita isikan value bagi menggerakkan content, mari kita mulai latihannya dengan cara siapkan terlebih dahulu text editornya dan copy script html nya di bawah ini
<html>
<head>
<title>Cara Membangun RollIn Content Dengan CSS</title>
</head>
<body>
<h1 class=animated rollIn>Selamat Datang Di Source Code Aplikasi</h1>
</body>
<html>
Kemudian save dengan index.html, langkah beriktunya teman – teman tambahkan script css di bawah ini
<style>
body{
background-color: lightgray;
}
</style>
Jikalau telah, save dan jalankan di borwser nya. Karenanya hasilnya seperti gambar di bawah ini
Seperti yang teman – teman lihat di gambar di atas ini, content masih dengan tampilan yang lazimnya. Saatnya kita kita implementasikan Cara Membuat RollIn Content Dengan CSS,pertama-tama – tama kalian tambahkan script css seperti gambar di bawah ini.
Guna script di atas ini ialah bagi mengatur atau menjadwalkan output yang akan di jalankan terlebih dahulu, pertama-tama 0% yang berfungsi akan tampil -100% dari kiri dan rotate 120deg, kemudian 50% yang berfungsi bagi menampilkan dari 0% hingga 50% atau dari kiri ke kanan kemudian di kembalikan ke posisi awal yaitu 100%. Dan masing – masing saya berikan color agar teman – teman dapat lihat prosesnya seperti apa. Karenanya di titik ahir atau 100% color berubah menjadi white, apabila telah diatur dengan @keyframes baru kita panggil class nya. Panggil class nya seperti gambar di bawah ini
Dan di pada class nya baru di berikan style animation kemudian saya berikan kecepatan 3s(3 detik), karenanya apabila teman – teman telah mengetikkan persis seperti yang saya perintahkan akan menghasilkan text dengan animasi dengan kecepatan 3s dan di titik ahir atau tampilan 100% text akan berubah menjadi warna putih.
Bagaimana, benar-benar gampang bukan??
Bagus, sekianlah di artikel kali ini mengenai Cara Membuat RollIn Content Dengan CSS, kita jumpa kembali di artikel berikutnya. Semoga bermanfaat dan menjadi tambahan pengetahuan css dan html khususnya teman – teman yang ketika ini sedang belajar html dan css. Atau pun dapat teman – teman eksperimen sendiri dari latihan kita kali ini supaya lebih menguasai animasi css, ini mirip tampilan yang di bikin Jquery dan Javascript. Dengan pengetahuan html dan css kita pun dapat merancang animasi dan slide sendiri.
Terimakasih dan Hingga Jumpa.
Sumber https://kursuswebsite.org
