Cara Membuat Animasi Warna di VioMagz

Trik kali ini saya buat karena banyak yang mencari artikel bagaimana cara membuat gradasi warna yang bisa berubah-ubah (animated gradient colors) di template VioMagz.

Template VioMagz yang didesain Mas Sugeng memang memiliki komposisi warna yang menarik. Yakni warna gradasi (gradient color) pada bagian header navigasi. Warna gradasi ini tampaknya akan menjadi tren untuk beberapa waktu ke depan.

Meski menarik, masih banyak orang yang masih penasaran. Bisakah warna gradasi ini gonta ganti setiap waktu? Agar tidak cepat bosan, mungkin?

Jawabannya, BISA! Yuk, kita simak caranya.

1. Seperti biasanya, untuk mengedit tampilan theme VioMagz kita harus masuk ke menu Theme - Edit HTML.


2. Carilah kode ]]></b:skin> dan pasang script di bawah ini ke atasnya.



#header-container{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}
@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}



3. Klik tombol Simpan dan lihat hasilnya.

Modifikasi Tampilan Animasi Warna Template VioMagz

Jika kamu perhatikan, animasi gradasi warna hanya muncul pada bagian header saja. Kenapa? Karena pada script animasi warna di atas memang diatur hanya untuk header.

Jika kamu ingin memasang animasi warna di bagian lain dari situs web, misalnya pada tombol Back to top atau footer, maka cukup tambahkan tag Div masing-masing element setelah #header-container.

Contoh, jika kamu ingin membuat animasi gradasi pada header, footer, dan back to top pada template VioMagz maka ubah script di atas menjadi :

#header-container, #footer-navmenu, #back-to-top{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}
@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Semoga membantu 😃