Cara Membuat Animasi Warna di VioMagz - Penyu Biru

Cara Membuat Animasi Warna di VioMagz

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.

  3. #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%}}

  4. Klik tombol Simpan dan lihat hasilnya. Contoh demo bisa dilihat di sini.

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 😃


Artikel Cara Membuat Animasi Warna di VioMagz Selesai!

Demikian posting Penyu Biru pada kategori Tutorial kali ini. Jika kamu merasa tulisan saya tentang Cara Membuat Animasi Warna di VioMagz ini bermanfaat, mohon kesediaannya untuk meninggalkan komentar atau bagikan artikel ini ke media sosial 🙏

Berlangganan artikel terbaru via email :

Tampilkan Komentar
Sembunyikan Komentar

Belum ada komentar pada "Cara Membuat Animasi Warna di VioMagz"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel