Pelajari cara menginstal jendela gambar Parallax dalam format AMP HTML dengan mengambil beberapa langkah sederhana, dan dengan demikian mengoptimalkan situs web yang Anda buat di AMP.
Parallax adalah efek lain yang dimungkinkan dengan menggabungkan animasi dan amp amp-position-observer.
Pertama, Anda harus memasukkan scripts berikut
Masukkan ekstensi amp-position-observer
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
Masukkan 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.
.parallax-image-window {
overflow: hidden;
}
.parallax-image-window amp-img {
margin-bottom: -30%;
}
Parallax biasanya melibatkan menerjemahkan elemen pada sumbu dan saat pengguna bergerak.
Di sini kita mendefinisikan adegan yang memiliki ketinggian lebih rendah dari gambar di dalamnya, sementara pengguna bergerak, kami memindahkan gambar membuat jendela paralaks dalam gambar.
Contohnya<div class="parallax-image-window"> <amp-position-observer on="scroll:parallaxTransition.seekTo(percent=event.percent)" intersection-ratios="1" layout="nodisplay"> </amp-position-observer> <amp-img id="parallaxImage" width="1280" height="873" layout="responsive" src="/img/elephant.jpg" alt="Shannenpio Parallax"></amp-img> </div>
Animasi itu sendiri hanya memindahkan gambar "transform": "translateY(-30%)"
<amp-animation id="parallaxTransition"
layout="nodisplay">
<script type="application/json">
{
"duration": "1",
"fill": "both",
"direction": "reverse",
"animations": [{
"selector": "#parallaxImage",
"keyframes": [{
"transform": "translateY(-30%)"
}]
}]
}
</script>
</amp-animation>