Membuat Particle Animation Dengan Canvas Pada AMP HTML

Banyak yang mengatakan bahwa AMP HTML terkesan kaku dalam membuat sebuah website. Banyak yang mengatakan bahwa dengan AMP HTML kita tidak bisa membuat web lebih aktraktif hanya dengan alasan karena tidak bisa menggunakan javascript atau jquery.

Padahal dengan kreatifitas dan imajinasi, kita bisa membuat halaman AMP menjadi aktraktif dan tidak kalah menarik dengan halaman web biasa yang menggunakan javascript atau jquery.
Salah satu elemen yang bisa membuat halaman web menjadi menarik dan aktraktif adalah membuat particle animation dengan canvas. Saya kadang suka main-main dengan cursor ketika menjumpai sebuah halaman dengan particle animation.
Membuat particle animation dengan canvas ini menggunakan javascript. Tapi tenang, buat Anda yang menggunakan AMP HTML tetap bisa menggunakan particle animation ini dengan sedikit trik.
Untuk menggunakan particle animation pada AMP ini kita bisa menggunakan amp-iframe dan saya sudah membuatkan amp-iframe particle animation untuk Anda gunakan seperti pada animasi berikut ini

DEMO

Kita bisa menggunakan ini di bagian atas blog sebagai hero atau bisa sebagai background footer.
Jika Anda ingin mencobanya, silahkan ikuti langkah-langkah di bawah ini.

1. Kode HTML

Silahkan simpan kode berikut di bawah header untuk membuat particle animation ini sebagai hero.

<div class="canvas-box">

<h2>This is particle canvas on AMP HTML</h2>

  <amp-iframe width="500"

              height="280"

              layout="responsive"

              sandbox="allow-scripts allow-same-origin allow-popups"

              allowfullscreen=""

              frameborder="0"

              noloading=""

              src="https://cdn.staticaly.com/gh/animovi/html/master/particlecanvas-3.html?color=eee">

  <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUN0eeBedPbYyBA9bamW1e1s-vWS_i32JbFCpI4Hc7qWTvJoDyBaU_iuXfu1xZwS1E6Df30OtvWyMeQwuOSL84DK6NWDVIxfb5MwA_HOJ3bIB79TTsyC5M9BfDamWQ7b5m7QQ7LD-1WFo/s1600/back-iframe.png"

             layout="fixed-height"

             height="600"

             width="auto"

             placeholder></amp-img>

  </amp-iframe>

</div>

Kode eee yang ditandai itu untuk mengatur warna particle, silahkan sesuaikan dengan background.
Dan pastikan Anda sudah menyimpan JS amp-iframe di blog seperti kode berikut di atas kode </head>

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

2. Kode CSS

Dan berikut kode CSS untuk memberikan style pada elemen tersebut. Anda bisa atur sesuaikan tampilan particle animation ini pada CSS berikut:

.canvas-box {

    background: linear-gradient(90deg,#00626b 0,#00acc1 50%,#00f7ca 100%);

    position: relative;

    width: 100%;

    height: 500px;

}

.canvas-box amp-iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}

.canvas-box h2 {

    font-size: 3.25rem;

    font-weight: bold;

    font-family: inherit;

    text-align: center;

    color: #fff;

    line-height: 1.3;

    position: absolute;

    top: 10%;

    left: 0;

    right: 0;

    z-index: 2;

}

Bagaimana, mudah bukan?

Selamat mencoba dan berkreasi, semoga bermanfaat.