[Tutorial] Cara Memasang Animasi Wave Bergelombang di Bagian Footer

Seotechman.com, Bogor 30/03/2020. Untuk update artikel kali ini, kami akan sedikit membagikan tutorial cara memasang animasi wave bergelombang di bagian footer.

Ini bisa dibilang cukup mudah, kenapa mudah? Karena sobat hanya perlu menyimaknya dan mengkopi paste bahan-bahan yang sudah kami sediakan.

Animasi wave bergelombang untuk saat ini sangat banyak peminatnya, sudah banyak pula para blogger memasangnya di blog mereka masing-masing. Tidak hanya itu, adapun kelebihan dari animasi wave ini sendiri yaitu:

• Memberikan tampilan blog menjadi lebih bagus
• Enak dipandang
• Tidak berat (Dikarenakan hanya menggunakan CSS)

Nah untuk sobat yang tertarik dan ingin memasangnya juga di blog sobat. Silahkan ikuti cara-cara yang sudah kami jelaskan dibawah ini.

Cara Memasang Animasi Wave Bergelombang di bagian Footer

Untuk memulai semua cara dan langkah-langkah pembuatannya, disini kita hanya memerlukan CSS dan HTML saja.

Langkah yang pertama, kita buat CSS nya terlebih dahulu. Lihat penampakannya berikut ini:

a {
  color: #09f;
  font-weight: bold;
}
p {
  font-family: 'Lato', sans-serif;
  letter-spacing: 1px;
  font-size:14px;
  color: #333333;
}
.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}

Silahkan sobat kopi dan pastekan tepat di atas </style> atau bisa juga ]]</b:skin>. Jika sudah, mari kita lanjut ke tahap yang kedua yaitu, Membuat HTML nya.

<div>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>
<div class="content flex">
<p><a href="www.seotechman.com">Seotechman</a> | Copyright 2019 | Free to use</p>
</div>

Kopi semua Html diatas lalu paste dan tempatkan di bagian footer blog sobat.
Contoh:

<footer>
<div class='footer-wrapper'>
<p><a href='#'>seotechman.com</a> | Allright Reserved.</p>
</div>
</footer>

Note:
Kode footer di atas hanya sebagai contoh, setiap kode yang ada di blog pasti berbeda-beda. Jadi, sobat tinggal atur saja di bagian footer.

Nah, bagaimana menurut sobat, mudah bukan?

Oke, mungkin kami rasa cukup untuk tutorial cara memasang animasi wave bergombang di bagian footer blog. Semoga bermanfaat!

Virm Aditya

Berita teknologi informasi terkini

Bagikan Artikel ini