Asalamualaikum kawan sejatikuh pada kesempatan ini saya akan belajar cara memasukkan transisi ke komponen amp-carousel. Saya juga dapat menggunakan efek ini dengan komponen AMP lainnya seperti contoh di bawah ini.
Pertama, Anda harus memasukkan scripts berikut
Inserte la extencion amp-position-observer
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
impor ekstensi amp-animation
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
Style
CSS yang digunakan untuk contoh ini dimasukkan di sini sebagai referensi.
Aturan-aturan ini hanya diperlukan agar sampel bekerja, tetapi mereka tidak mendasar bagi konsep yang dibahas di sini.
.carousel-container {
margin-right: -60%;
margin-left: 60%;
}
Dalam sampel ini, kami memiliki korsel di mana elemen pertama didorong ke kanan dan ketika korsel menjadi terlihat, korsel kembali ke tempatnya dan memberikan "hint" visual bahwa korsel dapat dipindahkan secara horizontal.
Contohnya<amp-carousel class="carousel-container" height="300" layout="fixed-height" type="carousel"> <amp-position-observer on="enter:carouselTrasnsition.start" intersection-ratios="0.8" layout="nodisplay"> </amp-position-observer> <amp-img src="https://unsplash.it/800/600?image=1003" width="400" height="300" alt="a sample image"></amp-img>
<amp-img src="https://unsplash.it/800/600?image=1043" width="400" height="300" alt="another sample image"></amp-img>
<amp-img src="https://unsplash.it/800/600?image=1032" width="400"
height="300" alt="and another sample image"></amp-img>
</amp-carousel>
Di sini kita mendefinisikan animasi khusus waktu kami dengan penundaan 200 ms yang akan menggeser korsel ke kiri dalam 500 ms.
Animasi ini hanya akan diaktifkan satu kali oleh pengamat posisi seperti yang didefinisikan di atas.
<amp-animation id="carouselTrasnsition"
layout="nodisplay">
<script type="application/json">
{
"duration": "500ms",
"fill": "both",
"easing": "ease-in",
"delay": "200ms",
"animations": [{
"selector": ".carousel-container",
"keyframes": [{
"transform": "translateX(-60%)"
}]
}]
}
</script>
</amp-animation>