×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Efek Wave Animation di Blog

February 28, 2020   • 2 Comments

Pada postingan kali ini saya akan membagikan sebuah tutorial bagaimana cara membuat efek wave animation di blog.

Membuat efek wave animation yang saya berikan ini pada kamu tentunya akan dapat memperindah tampilan template kamu, agar kamunya atau pengunjung juga tidak bosan dengan template kamu yang itu itu aja. Wave Animation yang saya berikan ini bisa kamu terapkan diblog kamu, entah itu dibagian footer ( cocoknya seperti template yang memiliki tiga layout widget), atau dibagian mana saja yang menurutmu cocok.

Nah jika kamu penasaran bagaimana cara membuat efek wave animation di blog, kamu bisa ikuti tutorial dibawah ini, dan untuk melihat langsung contoh efek wave animationnya kamu bisa klik tombol dibawah ini.


Cara Membuat Efek Wave Animation di Blog
Efek Wave Animation yang saya bagikan hanya dapat dilihat ditampilan desktop
1. Pertama, login dulu ke Blogger,
2. Pada dashboard Blogger pilih Tema Edit HTML,
3. Lalu, disini kamu tentukan dulu dimana kamu akan meletakkan wave animationnnya, Misalkan dibagian footer tiga layout widget ,  cari kode <footer atau <div class='footer'...., kemudian copy kode dibawah ini dan letakkan tepat dibawah kode yang disebutkan,
<div id='area'>
<svg class='wave-animation' preserveAspectRatio='none' viewBox='0 24 150 28'>
<defs>
<path d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' id='gentle-wave'></path>
</defs>
<g class='wave-bg'>
<use fill='rgba(255,255,255,0.07)' x='50' xlink:href='#gentle-wave' y='0'></use>
<use fill='rgba(255,255,255,0.09)' x='50' xlink:href='#gentle-wave' y='3'></use>
<use fill='rgba(255,20,147,.4)' x='50' xlink:href='#gentle-wave' y='6'></use>
</g>
</svg>
</div>
4. Setelah itu copy kode CSS dibawah ini dan letakkan tepat diatas kode </b:skin> atau </style>,
/* Wave Animations */
#area .wave-animation{
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  transform:rotate(180deg);
}
/* Wave Animations */
.wave-animation{
display:block;
width:100%;
height:5em;
max-height:100vh;
margin:0;
position:absolute;
right:0;
left:0
}
.wave-bg > use {
 -webkit-animation: move-forever 20s linear infinite;
  animation: move-forever 20s linear infinite;
}
.wave-bg > use:nth-child(1) {
  animation-delay: -2s;
}
.wave-bg > use:nth-child(2) {
  animation-delay: -2s;
  animation-duration: 10s;
}
.wave-bg > use:nth-child(3) {
  animation-delay: -4s; animation-duration: 8s;
}
@-webkit-keyframes move-forever{0%{transform: translate(-90px, 0%);}100%{transform: translate(85px, 0%)}}
@keyframes move-forever{0%{transform: translate(-90px, 0%);}100%{transform: translate(85px, 0%)}}
@media screen and (max-width:800px){
#area {display: none;}}
5. Terakhir simpan atau save template dan lihat hasilnya.

Akhir Kata
Sekian tutorial bagaimana cara membuat efek wave animation di blog, semoga dengan adanya artikel ini dapat memperindah tampilan blog kamu, dan Selamat Mencoba :D

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

2 Responses to "Cara Membuat Efek Wave Animation di Blog"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With