amp-fx-parallax
Amp-fx-parallax adalah suatu elemen bergerak seolah-olah itu lebih dekat atau lebih jauh dari bidang pertama dari konten halaman. Saat pengguna memindahkan halaman, elemen bergerak lebih cepat atau lebih lambat tergantung pada nilai yang ditetapkan untuk atribut.
Efek Parallax dapat diaktifkan dengan menambahkan atribut amp-fx-parallax=<factor> untuk apa saja HTML n AMP.
Faktornya adalah desimal yang mengontrol seberapa cepat atau lambat barang akan bergerak dalam kaitannya dengan kecepatan perjalanan:
- Nilai lebih dari 1 menggeser item ke atas (elemen bergerak lebih cepat) saat pengguna memindahkan halaman ke bawah.
- Nilai kurang dari 1 memindahkan item ke bawah (item bergerak lebih lambat) saat pengguna bergerak ke bawah.
- Nilai 1 berperilaku normal.
- Nilai 0 secara efektif menyebabkan elemen dikoreksi dengan halaman.
Masukkan ekstensi amp-fx-parallax tepat setelah pembukaan <head>
Slide-out-of-sight efek dengan faktor > 1
Pada contoh berikut, kami mengizinkan judul halaman bergerak lebih cepat dari halaman dengan menambahkan atribut amp-fx-parallax dan memberinya nilai lebih besar dari 1. Ini menciptakan efek visual geser keluar dari pandangan. Judul diulang hanya untuk tujuan demonstrasi.
Efek Parallax dapat diaktifkan dengan menambahkan atribut amp-fx-parallax=<factor> untuk apa saja HTML n AMP.
Faktornya adalah desimal yang mengontrol seberapa cepat atau lambat barang akan bergerak dalam kaitannya dengan kecepatan perjalanan:
- Nilai lebih dari 1 menggeser item ke atas (elemen bergerak lebih cepat) saat pengguna memindahkan halaman ke bawah.
- Nilai kurang dari 1 memindahkan item ke bawah (item bergerak lebih lambat) saat pengguna bergerak ke bawah.
- Nilai 1 berperilaku normal.
- Nilai 0 secara efektif menyebabkan elemen dikoreksi dengan halaman.
Masukkan ekstensi amp-fx-parallax tepat setelah pembukaan <head>
<script async custom-element="amp-fx-parallax" src="https://cdn.ampproject.org/v0/amp-fx-parallax-0.1.js"></script>
Slide-out-of-sight efek dengan faktor > 1
Pada contoh berikut, kami mengizinkan judul halaman bergerak lebih cepat dari halaman dengan menambahkan atribut amp-fx-parallax dan memberinya nilai lebih besar dari 1. Ini menciptakan efek visual geser keluar dari pandangan. Judul diulang hanya untuk tujuan demonstrasi.
Contoh<div class="header"> <amp-img layout="responsive" width="1920" height="1280" src="https://unsplash.it/1920/1280?image=1003"></amp-img> <h1 amp-fx-parallax="1.4"> Title 1 <br> Title 2 <br> Title 3 <br> Title 4 <br> Title 5 <br> Title 6 <br> Title 7 <br> Title 8 <br> Title 9 <br> Title 10 <br> Title 11 <br> Title 12 <br> Title 13 <br> Title 14 <br> Title 15 <br> Title 16 <br> Title 17 <br> Title 18 <br> Title 19 <br> Title 20 <br> </h1> </div>Title 1
Title 2
Title 3
Title 4
Title 5