Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Animation
Webdesign

Meningkatkan Jalan yang Dimuat Halaman Web Dengan Animasi CSS

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Dalam tutorial sebelumnya, kita membuat halaman responsif layar penuh dengan flexbox. Hari ini, kita akan membuat halaman ini lebih menarik dengan menambahkan beberapa animasi CSS ke dalamnya.

Inilah yang akan kita buat:


1. HTML

Untuk menambahkan animasi yang diinginkan, kita akan sedikit memperbarui markup halaman awal. Dalam tutorial sebelumnya, markup main element kita terlihat seperti ini:

Untuk keperluan tutorial ini, kita akan menambahkan beberapa wrapper tambahan, mengubahnya menjadi ini:

Berikut adalah markup halaman secara keseluruhan setelah modifikasi ini:

2. Menambahkan Style CSS Awal

Dengan adanya HTML, mari kita fokuskan perhatian kita pada hal-hal penting: CSS.

Untuk memulai, kita akan melakukan empat hal:

  1. Sembunyikan semua elemen halaman.
  2. Tetapkan style untuk elemen header dan footer dan sub-elemennya.
  3. Tentukan style untuk ::after elemen pseudo dari header.
  4. Tentukan style untuk wrapper teks dan sub-elemennya di dalam main.

Berikut adalah style yang terkait:

3. Animasi Firing CSS

Dengan HTML dan CSS dasar yang siap, sekarang kita dapat berkonsentrasi pada animasi halaman.

Namun, sebelum melakukan itu, pastikan kita memahami kapan mereka harus dijalankan: idealnya, segera setelah halaman dimuat sepenuhnya. Ini memastikan bahwa semua aset halaman akan siap, duduk di posisi yang benar, dan kita tidak akan kehilangan salah satu efek animasi.

Dengan mengingat hal itu, pertama-tama kita menunggu halaman dimuat, dan ketika itu terjadi kita menggunakan JavaScript untuk menambahkan kelas loaded ke body.

Ini kode JavaScript terkait:

Animasi apa pun yang kita terapkan akan dilakukan kepada keturunan dari kelas yang di loaded.

Jadi, animasi scale-in pertama kita menargetkan pseudo-elemen ::after header:

Tip: Secara default, asal transformasi elemen adalah pusatnya, itulah sebabnya animasi elemen pseudo dimulai dari pusatnya. Jika Anda ingin animasi dimulai dari posisi lain, cukup ubah nilai properti transform-origin dari elemen target.

Di bawah ini Anda dapat melihat bagaimana animasi kita berubah di mana kita menerapkan transform-origin yang berbeda:

Selanjutnya, kita menggunakan efek fade-in untuk menampilkan elemen halaman. Selain animasi ini, kita juga menggunakan animasi slide-in untuk menampilkan konten header dan footer:

Akhirnya, elemen-elemen main menjadi terlihat melalui efek slide-in:

Sekarang mari kita lihat lagi apa yang baru saja kita buat:

Kesimpulan

Dalam tutorial singkat ini, kita berhasil menggerakkan laman kotak HTML dengan memanfaatkan animasi CSS.

Beberapa catatan sebelum ditutup:

  • Alih-alih animasi CSS, kita bisa menggunakan transisi CSS (hampir semua animasi kita beralih dari kondisi awal ke kondisi akhir). Animasi fade-in adalah yang paling rumit karena mencakup tiga langkah animasi (0%, 60%, 100%).
  • Alih-alih transformasi 2d, kita bisa menggunakan transformasi 3d.
  • Mainkan nilai animation-duration dan animation-delay untuk memodifikasi animasi sesuai dengan kebutuhan Anda.
  • Di layar seluler, Anda mungkin ingin membatasi jumlah animasi yang terjadi (mis. Hapus animasi footer). Animasi demo bekerja dengan baik terutama pada layar di mana semua konten halaman terlihat.

Lebih Banyak Belajar Animasi CSS

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.