Belajar menyisipkan gambar dengan judul atau deskripsi geser, dapat dipindahkan dari kiri ke kanan dan sebaliknya, semua menggunakan teknik AMP Html.
Pertama, Anda harus memasukkan skrip 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>
Impor ekstensi amp-animation
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
Sekarang tambahkan script amp-fit-text
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-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.
<style amp-custom>
.card {
margin: 10%;
position: relative;
}
.card-title {
padding: 5%;
padding-right: 40%;
font-size: 50%;
font-weight: bold;
color: #FAFAFA;
transform: translateX(-100%);
}
</style>
Sekarang kita telah mempelajari konsep inti dasar di belakang amp-position-observer dan amp-animasi , mari kita selidiki cara-cara yang lebih kreatif untuk menggabungkannya untuk membuat transisi yang menarik.
Dalam sampel ini, kami akan menggabungkan transisi timebound dan scrollbound untuk menciptakan efek di mana opacity kartu dikaitkan dengan jumlah yang terlihat di jendela grafik (scrollbound) dan judul kartu animasi masuk / keluar (timebound) ke ketika kartu masuk dan meninggalkan jendela grafik.
Adegan kartu kami hanya terdiri dari gambar dan judul yang ditumpangkan. Di sini kita mendefinisikan dua pengamat posisi dengan nilai hubungan persimpangan yang berbeda:
- Yang pertama akan mengontrol opacity gambar saat pengguna bergerak.
- Yang kedua akan menjalankan animasi slider waktu untuk judul ketika adegan menjadi lebih terlihat (80%) dan jalankan kembali "terbalik" ketika adegan keluar dari jendela grafis (20%).
Contohnya<div class="card ampstart-card"> <amp-position-observer on="scroll:fadeTransition.seekTo(percent=event.percent)" intersection-ratios="0" layout="nodisplay"> </amp-position-observer> <amp-position-observer on="enter:slideTransition.start; exit:slideTransition.start,slideTransition.reverse" intersection-ratios="0.8" layout="nodisplay"> </amp-position-observer> <amp-fit-text layout="fill"> <div class="card-title"> Organic, fresh tomatos and pasta! </div> </amp-fit-text> <amp-img id="cardImage" width="1280" height="898" layout="responsive" src="/img/food.jpg" alt="Picture of food table."></amp-img> </div>
Mari kita mendefinisikan keyframe untuk transisi masuk / keluar spiral pudar.
Kita akan pergi #cardImage dan kami mendefinisikan keyframe sedemikian rupa sehingga gambar mendapatkan opacity penuh dalam 40% pertama dari timeline dan mulai memudar di 40% terakhir dari timeline.
Perhatikan bahwa karena pengamat posisi yang mengendalikan animasi ini memiliki hubungan interseksi yang diatur ke 0, kami melewati seluruh garis waktu ketika pengguna menampilkan jumlah piksel dalam animasi. ViewportHeight + 2 * SceneHeight.
<amp-animation id="fadeTransition"
layout="nodisplay">
<script type="application/json">
{
"duration": "1",
"fill": "both",
"direction": "reverse",
"animations": [{
"selector": "#cardImage",
"keyframes": [{
"opacity": "0.3",
"offset": 0
},
{
"opacity": "1",
"offset": 0.4
},
{
"opacity": "1",
"offset": 0.6
},
{
"opacity": "0.3",
"offset": 1
}
]
}]
}
</script>
</amp-animation>
Untuk efek meluncur masuk / keluar dari judul, kami hanya mendefinisikan animasi 500ms yang akan memindahkan judul sepanjang sumbu X.
Animasi ini hanya akan diaktifkan (dalam arah normal atau terbalik) melalui pengamat posisi kedua saat adegan sebagian besar visible/invisible.
<amp-animation id="slideTransition"
layout="nodisplay">
<script type="application/json">
{
"duration": "500ms",
"fill": "both",
"easing": "ease-out",
"iterations": "1",
"animations": [{
"selector": ".card-title",
"keyframes": [{
"transform": "translateX(-100%)"
},
{
"transform": "translateX(0)"
}
]
}]
}
</script>
</amp-animation>