Membuat Background Website Beriak Cair Seperti Air Menggunakan jQuery Ripples

Tutorial bagaimana cara menambahkan background efek air pada website, menggunakan jQuery Ripples

•

on Jum, 03/18/2016 - 14:58

•

6.846 View

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...

Profil Penulis

Member Since 8 tahun 11 bulan ago

Aditya Suranata

Embedded System, Internet of Things, Precision Agriculture, Controlled Environment...

Aditya suka menulis, bukan hanya sekedar hobi, menulis menjadi medianya untuk mencurahkan pikiran dan perasaan. Di TutorKeren.com kebanyakan menyumbang tulisan sesuai dengan minat dan keahliannya yaitu pada kategori pemrograman dan elektronika....