Seperti yang kita ketahui, bahwa javascript berperan besar dalam membuat website kita tampak lebih responsif. Seperti kita bisa menambahkan efek terentu pada saat yang ditentukan juga. Atau bahkan kita bisa membuat efek mouseover. Mouseover sendiri akan bekerja jika cursor pada mouse, menyentuh elemen terntentu, setelah itu kita atur efek apa yang akan terjadi selanjutnya.
Di tutorial kali ini nantinya kita akan membuat sebuah gelembung bulat yang akan bergerak secara random dan memantul, setiap gelembung bulat tersebut menyentuh cursos mouse, maka gelembung tersebut akan membesar, dan akan kembali normal jika sudah tidak terkena cursor. Itulah yang dinamakan dengan efek mouseover.
Langkah Pertama
- Buat file index.html
- Buat file style.css
- Buat file script.js
Langkah Kedua
File index.html
Untuk file index ini nantinya hanya kita gunakan untuk memanggil file css dan javascript yang kita buat nanti. Untuk kode pada index nantinya hanya akan seperti ini.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="canvas"></canvas> <script src="script.js"></script> </body> </html>
Kita membuat tag canvas yang diberi id canvas agar nantinya bisa digunakan oleh file javascript.
File style.css
body {
margin: 0px;
background-color: rgb(56, 220, 250);
overflow: hidden;
}
Disini kita merubah background nya agar memiliki warna yang menarik, dan overflow: hidden; berfungsi untuk menyembunyikan elemen yang melawati batas tertentu.
File script.js
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var tx = window.innerWidth;
var ty = window.innerHeight;
canvas.width = tx;
canvas.height = ty;
Pertama, kita buat variabel yang menampung beberapa elemen nantinya kita pakai. Var canvas disini memanggil tag canvas yang memiliki id canvas. Var c berfungsi untuk mendapatkan sebuah objek yang kita dapatkan pada area canvas. Var tx dan ty berfungsi untuk mendapatkan lebar dan tinggi dari layar kita. Kemudian variabel tersebut digunakan untuk mengukur lebar dan tinggi pada canvas.
var mousex = 0;
var mousey = 0;
addEventListener("mousemove", function() {
mousex = event.clientX;
mousey = event.clientY;
});
Kemudian kode diatas berfungsi untuk mengatur event yang akan dijalankan ketika mouse bergerak.
var grav = 0.99;
c.strokeWidth=5;
function randomColor() {
return (
"rgba(" +
Math.round(Math.random() * 250) +
"," +
Math.round(Math.random() * 250) +
"," +
Math.round(Math.random() * 250) +
"," +
Math.ceil(Math.random() * 10) / 10 +
")"
);
}
Kode diatas berfungsi untuk mengatur warna secara random, jadi nanti tidak hanya satu warna saja yang muncul. Dapat dilihat kita menggunakan logika dari matematika untuk mengatur warna random dengan format RGBA.
function Ball() {
this.color = randomColor();
this.radius = Math.random() * 20 + 14;
this.startradius = this.radius;
this.x = Math.random() * (tx - this.radius * 2) + this.radius;
this.y = Math.random() * (ty - this.radius);
this.dy = Math.random() * 2;
this.dx = Math.round((Math.random() - 0.5) * 10);
this.vel = Math.random() /5;
this.update = function() {
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
c.fillStyle = this.color;
c.fill();
//c.stroke();
};
}
var bal = [];
for (var i=0; i<50; i++){
bal.push(new Ball());
}
function animate() {
if (tx != window.innerWidth || ty != window.innerHeight) {
tx = window.innerWidth;
ty = window.innerHeight;
canvas.width = tx;
canvas.height = ty;
}
requestAnimationFrame(animate);
c.clearRect(0, 0, tx, ty);
for (var i = 0; i < bal.length; i++) {
bal[i].update();
bal[i].y += bal[i].dy;
bal[i].x += bal[i].dx;
if (bal[i].y + bal[i].radius >= ty) {
bal[i].dy = -bal[i].dy * grav;
} else {
bal[i].dy += bal[i].vel;
}
if(bal[i].x + bal[i].radius > tx || bal[i].x - bal[i].radius < 0){
bal[i].dx = -bal[i].dx;
}
if(mousex > bal[i].x - 20 &&
mousex < bal[i].x + 20 &&
mousey > bal[i].y -50 &&
mousey < bal[i].y +50 &&
bal[i].radius < 70){
//bal[i].x += +1;
bal[i].radius +=5;
} else {
if(bal[i].radius > bal[i].startradius){
bal[i].radius += -5;
}
}
//forloop end
}
//animation end
}
animate();
setInterval(function() {
bal.push(new Ball());
bal.splice(0, 1);
}, 400);
Kemudian kita ikuti kode diatas dan pastikan tidak ada kesalahan kode, karena nantinya akan menyebabkan error pada saat program dijalankan. Maka Full code nantinya akan tampak seperti ini.
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var tx = window.innerWidth;
var ty = window.innerHeight;
canvas.width = tx;
canvas.height = ty;
var mousex = 0;
var mousey = 0;
addEventListener("mousemove", function() {
mousex = event.clientX;
mousey = event.clientY;
});
var grav = 0.99;
c.strokeWidth=5;
function randomColor() {
return (
"rgba(" +
Math.round(Math.random() * 250) +
"," +
Math.round(Math.random() * 250) +
"," +
Math.round(Math.random() * 250) +
"," +
Math.ceil(Math.random() * 10) / 10 +
")"
);
}
function Ball() {
this.color = randomColor();
this.radius = Math.random() * 20 + 14;
this.startradius = this.radius;
this.x = Math.random() * (tx - this.radius * 2) + this.radius;
this.y = Math.random() * (ty - this.radius);
this.dy = Math.random() * 2;
this.dx = Math.round((Math.random() - 0.5) * 10);
this.vel = Math.random() /5;
this.update = function() {
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
c.fillStyle = this.color;
c.fill();
//c.stroke();
};
}
var bal = [];
for (var i=0; i<50; i++){
bal.push(new Ball());
}
function animate() {
if (tx != window.innerWidth || ty != window.innerHeight) {
tx = window.innerWidth;
ty = window.innerHeight;
canvas.width = tx;
canvas.height = ty;
}
requestAnimationFrame(animate);
c.clearRect(0, 0, tx, ty);
for (var i = 0; i < bal.length; i++) {
bal[i].update();
bal[i].y += bal[i].dy;
bal[i].x += bal[i].dx;
if (bal[i].y + bal[i].radius >= ty) {
bal[i].dy = -bal[i].dy * grav;
} else {
bal[i].dy += bal[i].vel;
}
if(bal[i].x + bal[i].radius > tx || bal[i].x - bal[i].radius < 0){
bal[i].dx = -bal[i].dx;
}
if(mousex > bal[i].x - 20 &&
mousex < bal[i].x + 20 &&
mousey > bal[i].y -50 &&
mousey < bal[i].y +50 &&
bal[i].radius < 70){
//bal[i].x += +1;
bal[i].radius +=5;
} else {
if(bal[i].radius > bal[i].startradius){
bal[i].radius += -5;
}
}
//forloop end
}
//animation end
}
animate();
setInterval(function() {
bal.push(new Ball());
bal.splice(0, 1);
}, 400);
Hasil
Dan ini adalah hasil saat gelembung mengenai cursor.
Sekian tutorial membuat gelembung menggunakan javascript ini, sangat menarik bukan. Kita bisa membuat sesuatu hal yang menarik dan menghibur menggunakan Javascript. Sampai jumpa pada tutorial selanjutnya.
