Anda dapat menggunakan animasi CSS untuk menarik perhatian ke bagian tertentu dari halaman web Anda dan membuatnya lebih menarik.
Dalam kursus ini, Anda akan membuat bianglala. Anda akan mempelajari cara menggunakan CSS untuk menganimasikan elemen, mengubahnya, dan menyesuaikan kecepatannya.
Mulailah dengan pelat ketel standar. Tambahkan deklarasi DOCTYPE Anda, elemen html Anda dengan bahasa yang disetel ke bahasa Inggris, elemen head dan body Anda.
Tambahkan elemen meta Anda untuk rangkaian karakter yang benar, elemen judul Anda, dan elemen tautan untuk file ./styles.css.
Atur judul menjadi Ferris Wheel.
Tambahkan div di dalam elemen tubuh Anda dan berikan kelas roda.
Di dalam div baru Anda, tambahkan enam elemen span dengan set kelas ke garis, dan enam elemen div dengan set kelas ke kabin.
Langkah 3
Buat pemilih untuk elemen .wheel Anda. Mulailah dengan menyetel batas menjadi hitam solid 2px, radius batas menjadi 50%, dan margin kiri menjadi 50px.
Setel properti posisi pemilih .wheel ke absolut. Atur tinggi dan lebar keduanya menjadi 55vw.
Langkah 5
Berikan pemilih .wheel Anda properti max-height dan max-width keduanya diatur ke 500px.
Buat pemilih untuk elemen .line Anda. Mulailah dengan mengatur background-color menjadi hitam, lebar menjadi 50%, dan tinggi menjadi 2px.
Langkah 7
Setel properti posisi pemilih .line menjadi absolut, properti kiri menjadi 50%, dan properti teratas menjadi 50%.
Properti transform-origin digunakan untuk mengatur titik di mana transformasi CSS diterapkan. Misalnya, saat melakukan rotasi (yang akan Anda lakukan nanti dalam proyek ini), asal transformasi menentukan di sekitar titik mana elemen diputar.
Berikan pemilih .line properti transform-origin 0% 0%. Ini akan mengimbangi titik asal sebesar 0% dari kiri dan 0% dari atas, menyetelnya ke pojok kiri atas elemen.
Langkah 9
Buat pemilih untuk menargetkan elemen .line kedua Anda. Setel properti transformasi ke rotate(60deg).
Ingatlah bahwa properti transform memungkinkan Anda untuk memanipulasi bentuk elemen. Dalam hal ini, menggunakan nilai rotate(60deg) akan memutar elemen di sekitar titik asal transformasi sebesar 60 derajat searah jarum jam.
Langkah 10
Dengan menggunakan pola yang sama, buat pemilih terpisah untuk .line ketiga, .line keempat, .line kelima, dan .line keenam.
Setel properti transformasi untuk .line ketiga untuk diputar (120deg), yang keempat diputar (180deg), yang kelima diputar (240deg), dan yang keenam diputar (300deg).
Buat pemilih .cabin. Atur background-color menjadi merah, lebar menjadi 20%, dan tinggi menjadi 20%.
Langkah 12
Berikan .cabin posisi absolut, dan batas solid 2px.
Atur .cabin untuk memiliki properti transform-origin 50% 0%. Ini akan menyetel titik asal agar diimbangi 50% dari kiri dan 0% dari atas, menempatkannya di tengah tepi atas elemen.
Langkah 14
Saatnya memposisikan kabin di sekitar kemudi. Pilih elemen .cabin pertama. Atur properti kanan menjadi -8,5% dan properti teratas menjadi 50%.
Melanjutkan pola, pilih elemen .cabin berikut dan terapkan aturan khusus untuknya:
Kabin kedua harus mengatur properti yang tepat menjadi 17% dan properti teratas diatur menjadi 93,5%.
Kabin ketiga harus memiliki properti yang tepat disetel ke 67% dan properti teratas disetel ke 93,5%.
Kabin keempat harus mengatur properti kiri ke -8,5% dan properti atas diatur ke 50%.
Kabin kelima harus mengatur properti kiri menjadi 17% dan properti atas diatur menjadi 7%.
Kabin keenam harus memiliki properti yang tepat diatur ke 17% dan properti teratas diatur ke 7%.
Langkah 16
At-rule @keyframes digunakan untuk menentukan aliran animasi CSS. Dalam aturan @keyframes, Anda dapat membuat pemilih untuk titik tertentu dalam urutan animasi, seperti 0% atau 25%, atau gunakan from dan to untuk menentukan awal dan akhir urutan.
Aturan @keyframes memerlukan nama untuk diberikan padanya, yang Anda gunakan dalam aturan lain sebagai referensi. Misalnya, aturan @keyframes freeCodeCamp {} akan diberi nama freeCodeCamp.
Saatnya memulai animasi. Buat aturan @keyframes bernama roda.
Anda sekarang perlu menentukan bagaimana animasi Anda harus dimulai. Untuk melakukannya, buat aturan 0% dalam aturan roda @keyframes Anda. Properti yang Anda atur di pemilih bersarang ini akan diterapkan di awal animasi Anda.
Sebagai contoh, ini akan menjadi aturan 12%:
Langkah 18
Berikan aturan 0% properti transformasi yang disetel ke rotate(0deg). Ini akan memulai animasi tanpa rotasi.
Sekarang berikan aturan roda @keyframes pemilih 100%. Di dalamnya, atur transformasi untuk diputar (360 derajat). Dengan melakukan ini, animasi Anda sekarang akan menyelesaikan putaran penuh.
Langkah 20
Properti animation-name digunakan untuk menautkan aturan @keyframes ke pemilih CSS. Nilai properti ini harus cocok dengan nama aturan @keyframes. Berikan pemilih .wheel Anda properti nama-animasi yang disetel ke roda.
Properti animation-duration digunakan untuk mengatur berapa lama animasi harus diurutkan untuk diselesaikan. Waktu harus ditentukan dalam detik (detik) atau milidetik (md). Setel pemilih .wheel Anda agar memiliki properti durasi animasi 10 detik.
Properti animation-iteration-count menetapkan berapa kali animasi Anda harus diulang. Ini dapat diatur ke angka, atau ke tak terbatas untuk mengulang animasi tanpa batas. Bianglala Anda tidak boleh berhenti, jadi atur pemilih .wheel untuk memiliki animasi-iterasi-jumlah tak terbatas.
Properti animation-timing-function mengatur bagaimana perkembangan animasi dari waktu ke waktu. Ada beberapa nilai yang berbeda untuk properti ini, tetapi Anda ingin animasi kincir ria berjalan dengan kecepatan yang sama dari awal hingga akhir. Setel fungsi pengaturan waktu animasi menjadi linier di pemilih .wheel Anda.
Langkah 22
Buat aturan @keyframes lainnya dengan nama kabin. Gunakan properti yang sama dengan roda @keyframes Anda, salin aturan 0% dan 100%, tetapi tetapkan properti transformasi pemilih 100% untuk diputar (-360deg).
Dengan pemilih .wheel Anda, Anda membuat empat properti berbeda untuk mengontrol animasi. Untuk pemilih .cabin, Anda dapat menggunakan properti animasi untuk menyetel semuanya sekaligus.
Setel properti animasi aturan .cabin ke kabin 10s linier tak terbatas. Ini akan mengatur nama-animasi, durasi-animasi, fungsi-waktu-animasi, dan properti hitungan-ulangan-animasi dalam urutan itu.
Langkah 24
Untuk membuat animasi kabin Anda tampak lebih seperti gerakan berayun yang alami, Anda dapat menggunakan fungsi pengaturan waktu masuk-keluar. Pengaturan ini akan memberi tahu animasi untuk memulai dan mengakhiri dengan kecepatan lebih lambat, tetapi bergerak lebih cepat di tengah siklus.
Ganti linear menjadi ease-in-out di pemilih .cabin.
Anda dapat menggunakan aturan @keyframes untuk mengontrol lebih dari sekadar transformasi elemen. Di pemilih 0% kabin @keyframes Anda, atur background-color menjadi kuning.
Langkah 26
Di antara pemilih 0% dan 100%, tambahkan pemilih 50%. Ini akan berlaku di tengah siklus animasi. Atur background-color menjadi ungu.
Karena animasi berada pada loop tak terbatas dan warna awal dan akhir tidak sama, transisi tampak tersentak-sentak saat beralih kembali ke kuning dari merah.
Untuk mulai memperbaikinya, hapus background-color dari pemilih 0% Anda.
Langkah 28
Buat pemilih 25% baru antara pemilih 0% dan 50%. Berikan pemilih baru ini properti background-color yang disetel menjadi kuning.
Terakhir, buat pemilih 75% baru antara pemilih 50% dan 100%. Beri pemilih baru ini properti background-color yang disetel ke kuning.
Dengan itu, animasi Anda jauh lebih halus dan kincir ria Anda selesai.
Full Script bisa di download DISINI.
Postingan
0 comments:
Posting Komentar