Labkom99.Com -  Membuat efek 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.

Membuat Animasi Kursor Mouse Dengan HTML Dan Canvas


Alat / Bahan Baku

Notepad 
Bisa menggunakan Tools web programming Lain

Perhatian 

Sebelum belajar membuat efek 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;
}

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

Komentar