Ada yang bertanya di Facebook Page Miarana DIY, mengenai template web yang digunakan tutorkeren.com. Karena banyak teman-teman yang penasaran mengenai efek air pada header masing-masing halaman itu bagaimana cara membuatnya, maka berikut saya tuliskan tutorial bagaimana cara menambahkan background efek air pada website, menggunakan jQuery Ripples.
Yang pertama, untuk tema, tutorkeren menggunakan tema moderen ekstra minimalis dan tentunya mobile friendly (based on Bootstrap). Templatenya sendiri menggunakan template gratisan termodifikasi dari StartBootstrap.com bernama Creative. Nama tema dan konfigurasi templatenya yang berdasarkan warna oranye benar-benar pas dengan jiwa orang-orang yang bernaung di sini, orang-orang kreatif.. ingat.. kreatif, bukan hiperaktif, itu beda lagi.. hohoho...
[[{"fid":"625","view_mode":"wysiwyg","fields":{"format":"wysiwyg","field_file_image_alt_text[und][0][value]":"Home Page Miarana DIY tutorkeren.com","field_file_image_title_text[und][0][value]":"Home Page Miarana DIY tutorkeren.com"},"type":"media","link_text":null,"attributes":{"alt":"Home Page Miarana DIY tutorkeren.com","title":"Home Page Miarana DIY tutorkeren.com","height":"267","width":"400","class":"media-element file-wysiwyg"}}]]
Karena background warna, gradien, gambar atau video yang cukup berat sudah membosankan dan itu itu aja, maka dengan berbekal ke-kreatifan dan kegatelan tangan kita menambahkan efek air ini pada gambar statis dari background web, sehingga menimbulkan efek yang sangat menarik ketika teman-teman pengunjung menggeser atau mengklikan mousenya di area header halaman tutorkeren.com. Efek air ini selain berawal dari kegatelan tangan, juga memiliki filosofi. Kembali ke moto dari Miarana DIY, sesudah belajar kita harus mengajar, karena dengan mengajar kita akan terus belajar. Dan hal yang paling cocok untuk mewakili itu pada tema adalah air yang sifatnya sangat fleksibel dan terus mengalir, hingga meneduhkan dahaga orang-orang yang haus ilmu.
Oke langsung saja kita bahas, bagaimana membuat background air pada website:
Membuat Efek Air Menggunakan jQuery Ripples
Untuk mengimplementasikan plugin dari jQuery ini, langkah umumnya adalah pertama pastikan template sudah menyertakan pustaka jQuery, kedua kita menambahkan plugin jQuery Ripples, dan ketiga kita melakukan inisialisasi pada elemen / DOM dari halaman web dimana efek ini akan diterapkan.
1. Sertakan file-file pustaka yang diperlukan pada bagian <head> template, download jQuery jquery-1.12.2.min.js, download jquery.ripples.js
2. Kemudian lakukan inisialisasi pada file javascript mu yang sudah dibalut dengan event jQuery(document).ready:
jQuery(document).ready(function($) { "use strict"; // Start of use strict //Water effer $('header').ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, }); });
Ingat ganti selector header
dengan nama selector yang kamu inginkan dimana efek ini akan bekerja, misal body
untuk menampilkan pada halaman penuh, atau div dengan id #ripple
atau class .ripple
untuk bagian khusus pada template.
Reload halaman dan efeknya sudah bisa terlihat. Hehe.. gampang kan? Iya donk, tapi dibalik kegampangan penggunaannya yang hanya beberapa baris kode, sesungguhnya algoritmanya ini lumayan rumit bagi yang anti dengan matematika, karena isinya hanya sum sum dari fungsi fungsi sin. Nah loh... hahaha who care? yang penting bisa dipakai di web dan buat tampilan web jadi lebih bagus, hahaha...
Dan tambahan lagi, plugin ini juga menyediakan beberapa fungsi tambahan untuk melakukan fungsi-fungsi khusus, seperti:
$('body').ripples("drop", x, y, radius, strength)
Jadi metode .ripples ini akan menenteskan air pada koordinat yang telah ditentukan (x, dan y) pada halaman web. Ini berguna jika kamu ingin membuat tetesan air otomatis secara acak.
Dan untuk kompatibilitas, atau untuk kenyamanan pengunjung yang mungkin merasa performa browsernya berat akibat ini, tersedia juga metode untuk menonaktifkan ripple:
$('body').ripples("pause") //Menghentikan
$('body').ripples("play" //memulai lagi)
Sekian kilasan tutorial membuat efek air 2d ini, semoga bermanfaat...
Komentar Terbaru