Assalamu'alaikum...Semangat Pagi...
Tutorial kali ini cara membuat efek gambar muncul setelah halaman di scroll ke bawah..
Efek ini terdiri dari fly in top yaitu gambar muncul dari atas artikel ,fly in bottom gambar muncul dari bawah artikel ,fly in right gambar muncul dari samping kanan artikel dan fly in left gambar muncul dari samping kiri artikel ,efek parallax , efek fade in dan lainnya.
Berikut cara penerapannya :
Pastikan JS custom amp fx collection sudah terpasang , jika belum silakan copy dan letakkan
<script async='async' custom-element='amp-fx-collection' src='https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js'/>
di template AMP dan di dalam tag head , kemudian simpan template.Untuk membuat gambar muncul dari atas silakan copy kode berikut ini
<amp-img amp-fx="fly-in-top" data-duration="2000ms" width="1280" height="873" layout="responsive" src="URL GAMBAR?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f1f0f9ab94d2d65d964b1b8681563d93&auto=format&fit=crop&w=1650&q=80" alt="NAMA GAMBAR"> </amp-img>
Ganti URL GAMBAR dan NAMA GAMBAR dengan url target gambar anda..
Klik disini untuk melihat contoh penerapan gambar menggunakan amp fx collection.
Untuk membuat efek gambar muncul dari posisi yang lainnya , anda cukup mengganti fly-in top menjadi bottom , right maupun left , bagaimana? Anda tertarik untuk menerapkannya...
Selamat mencoba..
Semoga bermanfaat..
Semangat Berbagi
Source : https://amp.dev/documentation/examples/components/amp-fx-collection