Halo teman – teman, apa kabar semuanya. Pastinya baik – baik saja kan?
Yak, jumpa lagi dengan saya di tutorial Dumet School. Pada artikel kali ini saya akan memberikan tips dan trik tentang Cara Membuat RollIn Content Dengan CSS, dimana rollin ini berfungsi untuk mendukung tampilan website lebih menarik dengan animation css. Kali ini kita akan membuat sebuah content dan content tersebut kita akan berikan fungsi rollin dengan menggunakan @keyframes, animation dan transform. Di masing – masing style tersebut di dalamnya kita isikan value untuk 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 Membuat RollIn Content Dengan CSS</title>
</head>
<body>
<h1 class="animated rollIn">Selamat Datang Di Dumet School</h1>
</body>
<html>
Kemudian save dengan index.html, langkah beriktunya teman – teman tambahkan script css di bawah ini
<style>
body{
background-color: lightgray;
}
</style>
Jika sudah, save dan jalankan pada borwser nya. Maka hasilnya seperti gambar di bawah ini
Seperti yang teman – teman lihat pada gambar di atas ini, content masih dengan tampilan yang biasa. Saatnya kita kita implementasikan Cara Membuat RollIn Content Dengan CSS,pertama – tama kalian tambahkan script css seperti gambar di bawah ini.
Fungsi script di atas ini adalah untuk mengatur atau menjadwalkan output yang akan di jalankan terlebih dahulu, pertama 0% yang berfungsi akan tampil -100% dari kiri dan rotate 120deg, kemudian 50% yang berfungsi untuk menampilkan dari 0% sampai 50% atau dari kiri ke kanan kemudian di kembalikan ke posisi awal yaitu 100%. Dan masing – masing saya berikan color agar teman – teman bisa lihat prosesnya seperti apa. Maka pada titik akhir atau 100% color berubah menjadi white, jika sudah diatur dengan @keyframes baru kita panggil class nya. Panggil class nya seperti gambar di bawah ini
Dan di dalam class nya baru di berikan style animation kemudian saya berikan kecepatan 3s(3 detik), maka jika teman – teman sudah mengetikkan persis seperti yang saya perintahkan akan menghasilkan text dengan animasi dengan kecepatan 3s dan pada titik akhir atau tampilan 100% text akan berubah menjadi warna putih.
Bagaimana, sangat mudah bukan??
Baik, sekian pada artikel kali ini tentang Cara Membuat RollIn Content Dengan CSS, kita jumpa kembali pada artikel berikutnya. Semoga bermanfaat dan menjadi tambahan pengetahuan css dan html khususnya teman – teman yang saat ini sedang belajar html dan css. Atau juga bisa teman – teman eksperimen sendiri dari latihan kita kali ini supaya lebih menguasai animasi css, ini mirip tampilan yang di buat Jquery dan Javascript. Dengan pengetahuan html dan css kita juga bisa membuat animasi dan slide sendiri.
Terimakasih dan Sampai Jumpa.
The post Cara Membuat RollIn Content Dengan CSS appeared first on Kursus Website Terbaik.