Labkom99.Com – Membuat animasi kursor mouse dengan sentuhan HTML, CSS, Canvas dan JQuery. Efek animasi kursor mouse ini adalah efek animasi super keren berbasis Canvas untuk mengikuti partikel gerakan mouse. Partikel gerakan mengikuti efek animasi melalui kode JS, yang secara acak menghasilkan efek partikel di kanvas dan membuat partikel bergerak dengan mouse.
Alat / Bahan Baku
Notepad
Bisa menggunakan Tools web programming Lain
Membuat Efek Animasi HTML Dan Canvas Yang Mungkin Anda Cari :
- Belajar HTML5 dan Canvas Membuat Animasi Lingkaran
- Belajar HTML5 Dan Canvas Membuat Efek Animasi Hue Ball Berbagai Warna
- Belajar HTML5 Dan Canvas Membuat Bola Api Luncur
- Membuat Animasi Teks Dengan HTML5 Dan Canvas
Perhatian
Sebelum belajar membuat animasi kursor mouse pada bagian ini sabaiknya memahami terlebih dahulu tentang Tutorial Belajar Dasar – Dasar HTML: Hypertext Markup Language. Dan bagi yang belum mengetahui cara membuat template, cara menyimpan dan cara membuka file HTML dapat mempelajarinya pada artikel Bagaimana Cara Membuat Template HTML
Metode / Langkah
Dalam Membuat Animasi Kursor Mouse Dengan HTML Dan Canvas perlu dipelajari terlebih dahulu apa itu canvas. Dalam artikel labkom99 dengan judul Belajar HTML5 dan Canvas Membuat Animasi Lingkaran anda dapat mempelajari apa itu canvas dan cara penggunaan canvas. HTML dan Canvas disarankan untuk menggunakan browser Firefox, Google, opera, dan browser lain yang mendukung HTML 5 untuk menjalakan program.
Membuat animasi kursor mouse dengan HTML dan Canvas dengan membuat skrip HTML untuk Canvas
<h1 class="title">
Tersenyumlah Dan Gerakkan Mouse Anda !!!
</h1>
<canvas></canvas>
Kemudian menambahkan CSS ke Canvas
html
{
margin: 0;
padding: 0;
border: 0;
font-family: 'Nunito', sans-serif;
}
canvas{
margin: 0;
padding: 0;
display: block;
touch-action: none;
}
h1.title{
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
}Membuat Efek Animasi Dengan HTML Dan CSS3
- Belajar HTML + CSS: Membuat Berbagai Bentuk Shape Dengan HTML dan CSS3
- Membuat Efek Animasi Lampu Neon Pada Tesk Dengan HTML Dan CSS3
- 30 Efek Animasi Mouse Hover Tombol Button Keren Dengan HTML Dan CSS3
- Membuat Efek Animasi Teks 3D Keren Dengan HTML Dan CSS3
- Membuat Efek Gelombang Pada Teks Menggunakan Clip-Path HTML Dan CSS3
- Membuat Efek Animasi Tesk Kartun Dengan HTML CSS3 Dan Google Font
- Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3
- Membuat Efek Animasi Tombol Button Keren Dengan HTML Dan CSS3
- Membuat Efek Animasi Teks Berkedip Dengan HTML Dan CSS3
- Membuat Efek Refleksi Membalik Gambar Dengan HTML Dan CSS3
- Belajar HTML Dan CSS3 Membuat Mouseover Zoom Dan Efek Thumbnail
- Membuat Efek Animasi Roket Meluncur Keren Dengan HTML5 CSS3 Dan SVG
- Membuat Teks Mirror Efek Bergetar Dengan HTML Dan CSS
Setelah elemen DOM halaman dimuat, gunakan metode berikut untuk membuat partikel mengikuti efek mouse dangan JavaScript
var canvas = document.querySelector('canvas');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
c = canvas.getContext('2d');
window.addEventListener('resize', function () {
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
initCanvas();
});
var mouse = {
x: undefined,
y: undefined };
window.addEventListener('mousemove',
function (event) {
mouse.x = event.x;
mouse.y = event.y;
drawCircles();
});
window.addEventListener("touchmove",
function (event) {
let touch = event.touches[0];
mouse.x = touch.clientX;
mouse.y = touch.clientY;
drawCircles();
});
function Circle(x, y, radius, vx, vy, rgb, opacity, birth, life) {
this.x = x;
this.y = y;
this.radius = radius;
this.minRadius = radius;
this.vx = vx;
this.vy = vy;
this.birth = birth;
this.life = life;
this.opacity = opacity;
this.draw = function () {
c.beginPath();
c.arc(this.x, this.y, this.radius, Math.PI * 2, false);
c.fillStyle = 'rgba(' + rgb + ',' + this.opacity + ')';
c.fill();
};
this.update = function () {
if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
this.vx = -this.vx;
}
if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
this.vy = -this.vy;
}
this.x += this.vx;
this.y += this.vy;
this.opacity = 1 - (frame - this.birth) * 1 / this.life;
if (frame > this.birth + this.life) {
for (let i = 0; i < circleArray.length; i++) {
if (this.birth == circleArray[i].birth && this.life == circleArray[i].life) {
circleArray.splice(i, 1);
break;
}
}
} else {
this.draw();
}
};
}
var circleArray = [];
function initCanvas() {
circleArray = [];
}
var colorArray = [
'355,85,80',
'9,80,100',
'343,81,45'];
function drawCircles() {
for (let i = 0; i < 6; i++) {
let radius = Math.floor(Math.random() * 4) + 2;
let vx = Math.random() * 2 - 1;
let vy = Math.random() * 2 - 1;
let spawnFrame = frame;
let rgb = colorArray[Math.floor(Math.random() * colorArray.length)];
let life = 100;
circleArray.push(new Circle(mouse.x, mouse.y, radius, vx, vy, rgb, 1, spawnFrame, life));
}
}
var frame = 0;
function animate() {
requestAnimationFrame(animate);
frame += 1;
c.clearRect(0, 0, innerWidth, innerHeight);
for (let i = 0; i < circleArray.length; i++) {
circleArray[i].update();
}
}
initCanvas();
animate();
// This is just for demo purposes :
for (let i = 1; i < 110; i++) {
(function (index) {
setTimeout(function () {
mouse.x = 100 + i * 10;
mouse.y = 100;
drawCircles();
}, i * 10);
})(i);
}Jangan lupa juga sertakan stopExecutionOnTimeout.js di halaman untuk timing animasi pada kursor Mouse
<script src="js/stopExecutionOnTimeout.js"></script>Dan untuk kode lengkapnya Download disini
