Untuk rilis stabil terakhir (v2) buka di sini
Untuk mendapatkan pemahaman yang lebih baik tentang cara kerjanya, saya mendorong Anda untuk memeriksa postingan saya tentang trik CSS.
Tambahkan gaya di <head> :
< link rel =" stylesheet " href =" https://unpkg.com/aos@next/dist/aos.css " /> Tambahkan skrip tepat sebelum menutup tag </body> , dan inisialisasi AOS:
< script src =" https://unpkg.com/aos@next/dist/aos.js " > </ script >
< script >
AOS . init ( ) ;
</ script > Instal paket aos :
yarn add aos@nextnpm install --save aos@nextImpor skrip, gaya, dan inisialisasi AOS:
import AOS from 'aos' ;
import 'aos/dist/aos.css' ; // You can also use <link> for styles
// ..
AOS . init ( ) ;Agar dapat berfungsi, Anda harus memastikan proses pembangunan Anda telah mengonfigurasi pemuat gaya, dan menggabungkan semuanya dengan benar. Namun jika Anda menggunakan Parcel, itu akan langsung berfungsi seperti yang disediakan.
AOS . init ( ) ;
// 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
} ) ;data-aos : < div data-aos =" fade-in " > </ div > Dan sesuaikan perilaku dengan menggunakan atribut data-aos-* :
< 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 >Lihat daftar lengkap semua animasi, easing, dan penempatan jangkar
Ada juga pengaturan yang hanya dapat digunakan berdasarkan per elemen:
data-aos-anchor - elemen yang offsetnya akan digunakan untuk memicu animasi, bukan animasi sebenarnya.Contoh:
< div data-aos =" fade-up " data-aos-anchor =" .other-element " > </ div >Dengan cara ini Anda dapat memicu animasi pada satu elemen, sementara Anda menggulir ke elemen lainnya - berguna dalam menganimasikan elemen tetap.
Objek AOS diekspos sebagai variabel global, untuk saat ini ada tiga metode yang tersedia:
init - inisialisasi AOSrefresh - menghitung ulang semua offset dan posisi elemen (disebut pada pengubahan ukuran jendela)refreshHard - memasang kembali array dengan elemen AOS dan memicu refresh (dipanggil pada perubahan DOM yang terkait dengan elemen aos )Contoh eksekusi:
AOS . refresh ( ) ; Secara default, AOS mengawasi perubahan DOM dan jika ada elemen baru yang dimuat secara asinkron atau ketika ada sesuatu yang dihapus dari DOM, ia akan memanggil refreshHard secara otomatis. Di browser yang tidak mendukung MutationObserver seperti IE, Anda mungkin perlu memanggil AOS.refreshHard() sendiri.
metode refresh dipanggil saat mengubah ukuran jendela dan seterusnya, karena tidak perlu membangun toko baru dengan elemen AOS dan harus seringan mungkin.
AOS mengirimkan dua peristiwa pada dokumen: aos:in dan aos:out setiap kali ada elemen yang dianimasikan masuk atau keluar, sehingga Anda dapat melakukan hal-hal tambahan di JS:
document . addEventListener ( 'aos:in' , ( { detail } ) => {
console . log ( 'animated in' , detail ) ;
} ) ;
document . addEventListener ( 'aos:out' , ( { detail } ) => {
console . log ( 'animated out' , detail ) ;
} ) ; Anda juga dapat memberitahu AOS untuk memicu peristiwa khusus pada elemen tertentu, dengan mengatur atribut data-aos-id :
< div data-aos =" fade-in " data-aos-id =" super-duper " > </ div >Kemudian Anda akan dapat mendengarkan dua peristiwa khusus:
aos:in:super-duperaos:out:super-duperTerkadang animasi bawaan saja tidak cukup. Katakanlah Anda memerlukan satu kotak untuk memiliki animasi yang berbeda bergantung pada resolusi. Inilah cara Anda melakukannya:
[ data-aos = "new-animation" ] {
opacity : 0 ;
transition-property : transform , opacity;
& . aos-animate {
opacity : 1 ;
}
@media screen and ( min-width : 768 px ) {
transform : translateX ( 100 px );
& . aos-animate {
transform : translateX ( 0 );
}
}
}Kemudian gunakan dalam HTML:
< div data-aos =" new-animation " > </ div >Elemen ini hanya akan menganimasikan opacity pada perangkat seluler, namun dari lebar 768px elemen ini juga akan bergeser dari kanan ke kiri.
Mirip dengan animasi, Anda dapat menambahkan pelonggaran khusus:
[ data-aos ] {
body [ data-aos-easing = "new-easing" ] & ,
& [ data-aos ][ data-aos-easing = "new-easing" ] {
transition-timing-function : cubic-bezier ( .250 , .250 , .750 , .750 );
}
}Jarak default untuk animasi bawaan adalah 100 piksel. Selama Anda menggunakan SCSS, Anda dapat menggantinya:
$ aos-distance : 200 px ; // It has to be above import
@import 'node_modules/aos/src/sass/aos.scss' ; Namun Anda harus mengonfigurasi proses pembangunan Anda untuk mengizinkannya mengimpor gaya dari node_modules sebelumnya.
Gunakan animatedClassName untuk mengubah perilaku default AOS, untuk menerapkan nama kelas yang ditempatkan di dalam data-aos saat gulir.
< div data-aos =" fadeInUp " > </ div > AOS . init ( {
useClassNames : true ,
initClassName : false ,
animatedClassName : 'animated' ,
} ) ; Elemen di atas akan mendapatkan dua kelas: animated dan fadeInUp . Dengan menggunakan kombinasi berbeda dari tiga pengaturan di atas, Anda seharusnya dapat mengintegrasikan pustaka animasi CSS eksternal apa pun.
Namun perpustakaan eksternal tidak terlalu peduli dengan status animasi sebelum animasi sebenarnya. Jadi jika Anda ingin elemen tersebut tidak terlihat sebelum digulir, Anda mungkin perlu menambahkan gaya serupa:
[ data-aos ] {
visibility : hidden;
}
[ data-aos ]. animated {
visibility : visible;
}duration , delayDurasi dan penundaan menerima nilai dari 50 hingga 3000, dengan langkah 50 ms, itu karena ditangani oleh css, dan untuk tidak membuat css lebih lama dari yang sudah saya terapkan hanya sebagian. Saya yakin hal tersebut seharusnya mencakup sebagian besar kasus.
Jika belum, Anda bisa menulis CSS sederhana yang akan menambah durasi lain, misalnya:
body [ data-aos-duration = '4000' ] [ data-aos ] ,
[ data-aos ][ data-aos ][ data-aos-duration = '4000' ] {
transition-duration : 4000 ms ;
} Kode ini akan menambahkan durasi 4000ms yang tersedia untuk Anda atur pada elemen AOS, atau untuk ditetapkan sebagai durasi global saat menginisialisasi skrip AOS. Perhatikan bahwa double [data-aos][data-aos] - ini bukan kesalahan, ini adalah trik, untuk membuat pengaturan individual lebih penting daripada global, tanpa perlu menulis "!penting" yang jelek di sana :)
Contoh penggunaan:
< div data-aos =" fade-in " data-aos-duration =" 4000 " > </ div > Animasi memudar:
Balik animasi:
Animasi slide:
Perbesar animasi:
Jika Anda menemukan bug, mempunyai pertanyaan atau ide, silakan periksa panduan kontribusi AOS dan jangan ragu untuk membuat masalah baru.
