What tutorial do you want for the next article! Request Here!

Cara Membuat Waves Animation Di Blogger Menggunakan Css & Html

Cara Membuat Waves Animation Di Blogger Menggunakan Css & Html

Hallo semua pada artikel kali ini admin mau mengshare tutorial Cara membuat Waves Animation Di Blogger Menggunakan css dan html.

Css3 memiliki wave animation dan efek gelombang yang dinamis. Karena css3 memiliki efek transisi dan animasi, sekarang sangat mudah menggunakan css3 untuk mencapai efek gelombang dinamis. Tidak masalah menggunakan transformasi secara langsung, sehingga translateX menghasilkan offset untuk terus mencapai efek dinamis. Lebih sederhana untuk diterapkan daripada menggunakan flash. Dan halamannya juga relatif lebih ramah.

Apa Sih Waves Animation?

Wave animation merupakan suatu afek animasi yang difungsikan untuk mempercantik halaman web. Seperti halnya yang labkom99 jabarkan pada kesempatan kali ini. Dengan membuat animasi gelombang dengan CSS3, perlu adanya kemampuan untuk mendesain dan memiliki imajinasi yang tinggi agar menghasilakn sesuatu yang unik dan menarik.

Animasi ini saya mendapatkannya dari sebuah artikel yang saya dapatkan dari google dan sedikit saya design ulang, setelah saya pasang di template saya ternyata ada yang meminta untuk membagikan tutorialnya

Animasi Ini Bertujuan Untuk memperkeren Tampilan Blog kalian, kalian bisa membuat nya dengan cara mengikuti tutorial berikut!!

Untuk Demonya Kalian bisa Scroll sampai bawah dan lihat dibelakang footer ada animasi, itulah waves animation

Cara Membuat Waves Animation Di Blogger!

disini saya membagikan dua versi, ada yang gelombang biasa,dan ada yg gelombang turun kebawah dan naik keatas

Tutorial V1

Step 1: Silahkan Kalian Masuk Blogger

Step 2: Pilih Tema Dan Edit Html

Step 3: Cari Kode ]]></b:skin> dan letakan Kode CSS berikut tepat di atasnya

Semua Template Memiliki Class Dark Mode Yang Berbeda Silahkan Sesuaikan Class Nya Dengan Template Anda ( Class DarkMode (.drK) )

/* Wave Animation */ .wvC{position:absolute;bottom:0;width:100%;z-index:-1} .wvS{position:relative} .wvS .waves{position:absolute;bottom:0;width:100%;height:60px;min-height:100px;max-height:150px} .wvH{position:relative;height:60px;background:#C6DAFC} .plx > use{fill:#C6DAFC;animation:waveMove 25s cubic-bezier(.55,.5,.45,.5) infinite} .plx > use:nth-child(1){opacity:.7;animation-delay:-2s;animation-duration:7s} .plx > use:nth-child(2){opacity:.5;animation-delay:-3s;animation-duration:10s} .plx > use:nth-child(3){opacity:.3;animation-delay:-4s;animation-duration:13s} .plx > use:nth-child(4){opacity:1;animation-delay:-5s;animation-duration:20s} @media (max-width: 896px){.wvS .waves{height:40px;min-height:50px;} .wvC .wvH{height:100px}} @keyframes waveMove{0%{transform: translate3d(-90px,0,0)}100%{transform: translate3d(85px,0,0)}} .drK .wvH{background:#343435} .drK .plx > use{fill:#343435}

Step 4: Salin Semua Code html dibawah ini dan letakan tepat dibawah kode </footer>

<!--[ Waves Animation ]-->
<div class='wvC'><div class='wvS'><svg class='waves' preserveAspectRatio='none' shape-rendering='auto' 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='wave-bg'/></defs><g class='plx'><use x='48' xlink:href='#wave-bg' y='0'/><use x='48' xlink:href='#wave-bg' y='3'/><use x='48' xlink:href='#wave-bg' y='5'/><use x='48' xlink:href='#wave-bg' y='7'/></g></svg></div><div class='wvH'/></div>

Tutorial V2

Untuk Tutorial V2 Kalian Cukup Mengubah Css,Hapus Semua kode css pada tutorial v1 dan gantik Dengan css dibawah ini

/* Wave Animation */ .wvC{position:absolute;bottom:0;width:100%;z-index:-1} .wvS{position:relative} .wvS .waves{position:absolute;bottom:0;width:100%;height:60px;min-height:100px;max-height:150px} .wvH{position:relative;height:0;background:#C6DAFC;animation:waveHd 7s infinite} .plx > use{fill:#C6DAFC;animation:waveMove 25s cubic-bezier(.55,.5,.45,.5) infinite} .plx > use:nth-child(1){opacity:.7;animation-delay:-2s;animation-duration:7s} .plx > use:nth-child(2){opacity:.5;animation-delay:-3s;animation-duration:10s} .plx > use:nth-child(3){opacity:.3;animation-delay:-4s;animation-duration:13s} .plx > use:nth-child(4){opacity:1;animation-delay:-5s;animation-duration:20s} @media (max-width:896px){.wvH{animation:waveHm 7s infinite}} .drK .wvH{background:#343435} .drK .plx > use{fill:#343435} @keyframes waveMove{0%{transform: translate3d(-90px,0,0)}100%{transform: translate3d(85px,0,0)}} @keyframes waveHm{0%{height:0}35%,65%{height:200px}100%{height:0}} @keyframes waveHd{0%{height:0}35%,65%{height:100px}100%{height:0}}

ok jadi sekian Cara Membuat Waves Animation Di Blogger Menggunakan Css & Html yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.

Source:
www.yazidtips.com

Post Tags

Animation blogger Widget

About the Author

Content Creator, Graphic Designer, UI / UX Designer

2 komentar

  1. Mas tutorial bikin Toc Seperti Median UI di fletro versi terbaru bang pliss🙏🙏
    1. Siap saya tampung dulu
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.