Aset Visual

Oleh Gendis Widodari

Melalui kelas ini, kamu diajak untuk:

  • Mengidentifikasi elemen-elemen dalam struktur body HTML Web Story.
  • Memahami fungsi dari setiap elemen dalam struktur body HTML Web Story.

Aset Visual Web Story

Seperti yang sudah dijabarkan di bagian pengenalan, Web Story mendukung ragam aset visual, mulai dari gambar, video, hingga 360.

Setiap aset visual memiliki tag AMP spesifik seperti berikut.

  • <amp-img>
  • <amp-video>
  • <amp-story-360>

AMP Story

Untuk memasukkan gambar dengan standard AMP, kita menggunakan tag <amp-img>. Elemen AMP Image juga memiliki atribut-atributnya sendiri. Kita juga bisa memasukkan berbagai jenis file, mulai dari .jpg, .png, .gif, dan lain-lain. 

<amp-img src="gambar.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in"></amp-img>

AMP Video

Tag <amp-video> tak hanya memiliki atribut keterangan seperti tinggi dan lebar, tetapi juga elemen di dalamnya. Elemen <source> ini yang nantinya akan diisi oleh tautan video yang ingin dimasukkan. 

<amp-video autoplay width="720" height="1280" layout="responsive" animate-in="fade-in" poster="poster_background.jpg">
    <source src="video.mp4" type="video/mp4"></source>
</amp-video>

Sebagai keterangan, atribut poster digunakan untuk memasukkan gambar latar belakang sembari browser memuat video.

AMP 360

Aset 360 memungkinkan kita menampilkan gambar-gambar dengan format 360, misal dari Google Street View.

Untuk memuat gambar 360, ada beberapa elemen yang harus kita cantumkan terlebih dahulu.

Pertama, script Javascript pada bagian <head>, spesifik di kumpulan script. Salin dan tempel kode ini.

<script async custom-element="amp-story-360" src="https://cdn.ampproject.org/v0/amp-story-360-0.1.js"></script>

Kedua, selector CSS amp-story-360 di bagian <style>, spesifik AMP Custom. Salin dan tempel kode di ini.

amp-story-360 canvas {
       position: absolute;
}

Terakhir, saatnya memasukkan tag <amp-story-360> pada struktur body HTML. AMP 360 memiliki banyak atribut. Lihat contohnya di bawah ini.

<amp-story-360 layout="fill" width="10" height="10" controls="gyroscope" class="" heading-start="-17.640348" heading-end="45.09019" pitch-start="7.374326" pitch-end="2.2192981" zoom-start="1.33" zoom-end="1.33" duration="12588ms" scene-heading="-204.00331"
                    scene-pitch="0" scene-roll="0">
      <amp-img crossorigin="anonymous" width="720" height="1280" class="panoImage" src="https://res.cloudinary.com/ninditobayu/image/upload/v1606730423/bromo/12._Bantengan_point_Sabana_by_%E5%A4%A7%E4%BB%81%E5%81%89_1_wfreuh.jpg">
      </amp-img>
</amp-story-360>

Selayang Pandang

  • Aset visual yang dapat dimasukkan dapat berupa gambar, gif, video, dan 360.
  • Elemen visual harus berada di bawah tag <amp-story-grid-layer>.

Kuis

Manakah tag yang dipakai untuk memasukkan video?

Selamat, Anda telah menyelesaikan pelajaran ini
Klik untuk menyelesaikan