Cara Menciptakan Animasi Warna Di Viomagz

Trik kali ini aku buat alasannya yaitu banyak yang mencari artikel bagaimana cara menciptakan gradasi warna yang dapat berubah-ubah (animated gradient colors) di template VioMagz.

Template VioMagz yang didesain Mas Sugeng memang mempunyai komposisi warna yang menarik. Yakni warna gradasi (gradient color) pada bab header navigasi. Warna gradasi ini sepertinya 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 hidangan Theme - Edit HTML.


2. Carilah instruksi ]]></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. Contoh demo dapat dilihat di sini.

Modifikasi Tampilan Animasi Warna Template VioMagz

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

Jika kau ingin memasang animasi warna di bab lain dari situs web, contohnya pada tombol Back to top atau footer, maka cukup tambahkan tag Div masing-masing element sehabis #header-container.

Contoh, kalau kau ingin menciptakan 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 😃

Bagikan Artikel ini