Menganimasikan Konten Saat Gulir dengan Perpustakaan CSS

sukma
sukma
4 minute read

Sudahkah Anda mencoba tutorial yang berbeda untuk konten animasi saat Anda menggulir ke atas dan ke bawah halaman? Tidak Beruntung? Lihatlah, pustaka CSS On Scroll adalah apa yang Anda cari! Dalam tutorial ini, saya akan menganimasikan konten saat menggulir menggunakan CSS.

Anda telah melihat banyak templat halaman panjang di mana berbagai jenis animasi diterapkan ke elemen konten saat Anda menggulir ke bawah.

Hari ini, kami memiliki Plugin AOS CSS yang membuatnya sangat mudah untuk menangani animasi yang berbeda dengan menggunakan kelasnya dengan kontrol penuh atas elemen.

Plugin bekerja dengan cara yang sederhana. Anda hanya perlu menerapkan kelas yang berbeda ke konten div elemen. Ini akan memicu animasi saat Anda menggulir ke atas atau ke bawah.

Anda tidak perlu menulis sekumpulan keyframe yang dikodekan dari awal. Anda harus menerapkan kelas sesuai dengan jenis animasi yang Anda butuhkan untuk elemen tertentu.

Library ini memiliki dua fitur hebat yang memungkinkan Anda menambahkan animasi Anda sendiri dengan mudah. Anda dapat mengubah hal-hal sesuai dengan viewport.

  • Ia memiliki semua logika di dalam JavaScript.
  • Semua animasi di stylesheet.

Pustaka AOS hanya melihat semua elemen dan posisinya berdasarkan pengaturan yang Anda berikan. Kemudian itu akan menambah atau menghapus kelas aos-animate. Tentu saja, Praktisnya tidak begitu mudah tetapi AOS membuatnya sederhana untuk Anda.

Penggunaan Dasar

Sangat mudah untuk mengimplementasikan perpustakaan di semua jenis situs web. Anda perlu menambahkan gaya <head> untuk memulai. Plugin memberi Anda sumber CDN jika Anda tidak ingin memuatnya dari server Anda.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aos.css" />

Langkah selanjutnya menambahkan skrip tepat sebelum menutup </body> elemen. Untuk menginisialisasi AOS Animasikan pada perpustakaan Gulir, Tentukan saja fungsi initnya.

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script> <script>     AOS.init(); </script>

Plugin AOS menawarkan berbagai opsi yang dapat Anda konfigurasikan dengan mudah untuk menangani cara kerja elemen. Anda dapat mengubahnya sesuai dengan kebutuhan Anda.

// You can also pass an optional settings object // below listed default settings AOS.init({   // Global settings:   disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function   startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on   initClassName: 'aos-init', // class applied after initialization   animatedClassName: 'aos-animate', // class applied on animation   useClassNames: false, // if true, will add content of `data-aos` as classes on scroll   disableMutationObserver: false, // disables automatic mutations' detections (advanced)   debounceDelay: 50, // the delay on debounce used while resizing window (advanced)   throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)   // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:   offset: 120, // offset (in px) from the original trigger point   delay: 0, // values from 0 to 3000, with step 50ms   duration: 400, // values from 0 to 3000, with step 50ms   easing: 'ease', // default easing for AOS animations   once: false, // whether animation should happen only once - while scrolling down   mirror: false, // whether elements should animate out while scrolling past them   anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation });

HTML untuk Menganimasikan Konten

Markupnya sederhana. cukup definisikan elemen HTML (kebanyakan div) dan tambahkan data-aos atribut. Kemudian Anda dapat menentukan nama kelas animasi yang ingin Anda gunakan.

<div data-aos="fade-in"></div>

Kustomisasi lebih lanjut, Anda dapat menyesuaikan perilakunya dengan menggunakan data-aos-* atribut. Mari temukan yang lengkap daftar semua animasi, easing dan penempatan jangkar.

  <div     data-aos="fade-up"     data-aos-offset="200"     data-aos-delay="50"     data-aos-duration="1000"     data-aos-easing="ease-in-out"     data-aos-mirror="true"     data-aos-once="false"     data-aos-anchor-placement="top-center"   >   </div>

jika kamu mau data-aos-* mengaitkan perilaku dengan cara yang sama pada semua elemen halaman Anda, lalu Anda dapat mendefinisikannya sebagai secara global dalam menambahkannya dengan setiap elemen secara terpisah.

Contoh Animasi di CSS

Anda tidak perlu menulis CSS Anda sendiri. Pilih dan terapkan kelas. Ada banyak animasi yang disertakan di perpustakaan yang dapat Anda gunakan.

Namun jika Anda ingin membuat custom, Anda bisa melakukannya dengan mudah. Sederhana dan mudah untuk membuat yang baru sebagai:

[aos="my-new-animation"] {   opacity: 0;   transition-property: opacity; } [aos="my-new-animation"].aos-animate {   opacity: 1; }

Tidak perlu khawatir dengan durasi atau penundaan karena sudah di aos.js Perpustakaan. Di CSS, Anda hanya:

  • Cukup tentukan gaya untuk atributnya aos dengan nama animasi kamu.
  • Selanjutnya, setel transition-property (secara default ini all, sehingga lebih banyak performa dan lebih dapat diprediksi jika Anda mempersempit transisi ke properti yang diinginkan)
  • Terakhir, tambahkan properti pasca-transisi pada .aos-animate

Itu selesai! Apakah Anda dapat menganimasikan konten saat gulir? Beri tahu saya melalui komentar di bawah jika Anda mempelajari sesuatu yang baru dan pasti akan menerapkan pustaka sederhana yang mengagumkan ini ke halaman web Anda.