Membuat Tiga Kolom Di Web Berisi Animasi

Pada artikel sebelumnya tentang animasi menggunakan Lottie yang mudah dan menyimpannya dalam web baik berbasis web biasa dan wordress.

Rekomendasi Hosting

Ada beberapa pertanyaan bagaimana menyimpan animasi tersebut menjadi beberapakolom, misalnya 3 kolom dengan animasi yang berbeda seperti gambar berikut.

Three Equal Columns

Bagaimana cara membuatnya?

Memang membutuhkan sedikut bahasa pemrograman, tapi jangan khawatir, gunakan saja html editor untuk membuatnya. Carilah kode html nya menggunakan google dengan keyword html column, bukalah misalnya https://www.w3schools.com/howto/howto_css_two_columns.asp

Masukkan kode lottie pada setiap kolom tersebut.

Selamat mencoba!!

Berikut kode lengkap

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Three Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    
<lottie-player src="https://assets10.lottiefiles.com/packages/lf20_rjadwvb1.json"  background="transparent"  speed="1"  style="width: 200px; height: 200px;"  loop  autoplay></lottie-player>
  </div>
  <div class="column" style="background-color:#bbb;">
   <lottie-player src="https://assets10.lottiefiles.com/packages/lf20_rjadwvb1.json"  background="transparent"  speed="1"  style="width: 200px; height: 200px;"  loop  autoplay></lottie-player>
  </div>
  <div class="column" style="background-color:#ccc;">
    <lottie-player src="https://assets10.lottiefiles.com/packages/lf20_rjadwvb1.json"  background="transparent"  speed="1"  style="width: 200px; height: 200px;"  loop  autoplay></lottie-player>
  </div>
</div>

</body>
</html>

Video Cara Mudah memasang animasi Lottie di web