Creating Particle Animation with Canvas on AMP HTML Blog

Creating Particle Animation with Canvas on AMP HTML - Many say that AMP HTML seems rigid in creating a website. Many say that with AMP HTML we cannot make the web more attractive just for the reason that we cannot use javascript or jquery.

Even though with creativity and imagination, we can make AMP pages become attractive and no less interesting than ordinary web pages that use javascript or jquery.

One element that can make web pages attractive and attractive is to create particle animation with canvas. I sometimes like to play with cursors when I encounter a page with particle animation.

Make particle animation with this canvas using javascript. But calm, for those of you who use HTML AMP can still use this particle animation with a little trick.

To use particle animation on this AMP we can use amp-iframe and I have made an amp-iframe particle animation for you to use as in the following animation

DEMO

We can use this at the top of the blog as a hero or as a background footer.

If you want to try it, please follow the steps below.

1. HTML code

Please save the following code below the header to make this particle animation as a 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/AVvXsEjF1Sy_vivKZSGjMCLFo_OnMr-gG91v-i1joHpT6oSbcdo62JeC8LXmlkv3uITtpQhJIUun1FaNWOqUBTIAWVcjbDW-kf_2jEejbHEvPLjWxf7KWhZrUcCxTPnw3HznIUUjqqfZ_nrM7yM/s1600/back-iframe.png"
             layout="fixed-height"
             height="600"
             width="auto"
             placeholder></amp-img>
  </amp-iframe>
</div>|

The marked eee code is to adjust the color of the particle, please adjust it to the background.

And make sure you have stored the JS amp-iframe on a blog like the following code above the code </head>

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

2. CSS Code

And here is the CSS code to style these elements. You can adjust the appearance of this particle animation in the following CSS:

.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;}

How, easy right?

Good luck and creative, hopefully useful.

Creating Particle Animation with Canvas on AMP HTML Blog

Advertiser