Cara Buat Animasi Footer Dengan Efek Gelombang
Updated
by
Admin
2 menit baca
Tentunya Ini Tutorial Ini Bukan Yang Pertama Kalinya, Salah Satunya Kalian Bisa Cek Blog Milik Tukang Redesign, Cara Membuat Footer Animasi Bergerak Ini Cukup Mudah, Kalian Bisa Ikuti Tutorialnya Sebagai Berikut
Cara Membuat Animasi Footer Dengan Efek Gelombang |
Oke Langsung Saja Simak Cara Pemasangan Nya.
Cara Membuat Efek Animasi Bergerak Dibagian footer
1. Langkah Yang Pertama Silahkan Loggin ke Blogger.com
2. Dalam Dashboard Blogger pilih menu Tema dan Edit HTML.
3. Setelah itu copy code CSS dibawah ini diatas ]]></b:skin> atau </style>. Gunakan CTRL F Untuk Mempermudah Pencarian
/* Footer Wave Animations by Candilkfb • Kang Sandi */ #footer-navmenu .wave-animation{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);bottom:initial;top:0;height:5em}#footer-navmenu{padding-top:50px;background:linear-gradient(to right, #654ea3, #eaafc8);position:relative}#footer-navmenu-container{max-width:1000px;margin:0 auto;text-align:center}#footer-navmenu ul{list-style:none;margin:0}#footer-navmenu ul li{display:inline-block;margin:6px 0}#footer-navmenu ul li:last-child::after{content:""}#footer-container {background:linear-gradient(to right, #654ea3, #eaafc8);} /* Wave Animation */ .wave-animation{display:block;width:100%;height:8em;max-height:100vh;margin:0;position:absolute;bottom:-10px}.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;fill:rgba(232, 174, 199, 0.58);}.wave-bg > use:nth-child(2){animation-delay:-2s;animation-duration:10s;fill:rgba(232, 174, 199, 0.85);}.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%)}}.wave-animation{height:3em}.wave-animation{height:4em}
4. Masih didalam Edit HTML, lanjut copy code HTML dibawah ini Tepat diatas <!-- footer nav menu -->.
<div id='footer-navmenu'> <svg class='wave-animation' preserveAspectRatio='none' viewBox='0 24 150 28' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <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'/> </defs> <g class='wave-bg'> <use fill='rgba(242,193,78,.5)' x='50' xlink:href='#gentle-wave' y='0'/> <use fill='rgba(242,193,78,.7)' x='50' xlink:href='#gentle-wave' y='3'/> <use fill='#fff' x='50' xlink:href='#gentle-wave' y='6'/> </g> </svg> </div>
Semoga Saja Tutorial Cara Membuat Efek Animasi Gelombang Di Bagian Footer Blogger Bisa Bermanfaat, Sampai Jumpa Di Postingan Selanjutnya.
www.candilkuya.com