Membuat Animasi Kursor Mouse Dengan HTML Dan Canvas

by -66 views

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.

Membuat Animasi Kursor Mouse Dengan HTML Dan Canvas


Alat / Bahan Baku

Notepad 

Bisa menggunakan Tools web programming Lain


Membuat Efek Animasi HTML Dan Canvas Yang Mungkin Anda Cari :

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 

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

About Author: labkom99

Gravatar Image
Labkom99 merupakan salah satu situs yang diperuntukkan menambah pengetahuan gratis tentang pemrograman, Akun Sosial, Google Update, Pembaruan Windows, Mac dan Banyak Lagi !!!