amp-fx-flying-carpet shannenpio
Untuk mendapatkan pengalaman terbaik dari contoh ini, gunakan perangkat seluler atau pilih desain perangkat seluler menggunakan Chrome.
Cara Penambahannya
Masukan script amp-fx-flying-carpet tepat di bawah pembukaan <head>
<script async custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>
Penggunaan dasar
Elemen amp-fx-flying-carpet harus ditempatkan setelah jendela grafis pertama, jadi pastikan untuk menempatkan konten yang cukup sebelum elemen tersebut menutupi ukuran jendela target.
Teks berikut adalah untuk memastikan bahwa elemen amp-fx-flying-carpet ditempatkan setelah jendela grafis pertama.
Contohnya<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum. </p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.
Pada elemen amp-FX-flying-carpet dapat digunakan untuk menampilkan iklan.
Gunakan parameter ketinggian untuk menentukan ketinggian "jendela"
Contohnya<div class="amp-flying-carpet-text-border">Advertising</div> <amp-fx-flying-carpet height="300px"> <amp-ad width="300" height="600" class="align-right" layout="fixed" type="doubleclick" data-slot="/35096353/amptesting/formats/flying_carpet"> </amp-ad> </amp-fx-flying-carpet> <div class="amp-flying-carpet-text-border">Advertising</div>
Pada amplifier amp-fx-flying-carpet dapat digunakan untuk menampilkan gambar.
Contohnya<amp-fx-flying-carpet height="200px"> <amp-img src="/img/landscape_lake_1280x857.jpg" width="1280" height="853" alt="an image"></amp-img> </amp-fx-flying-carpet>
Penentuan posisi
Dalam amplifier amp-fx-flying-carpet harus ditempatkan sebelum jendela tampilan terakhir jadi pastikan untuk menempatkan konten yang cukup setelah elemen untuk menutupi ukuran jendela target.
Teks berikut ini adalah untuk memastikan bahwa karpet amp-fx-flying ditempatkan sebelum jendela terakhir.
Contohnya<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum. </p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.