Hiệu ứng chuột cực độc với CSS và JavaScript

4

Hiệu ứng chuột cực độc với CSS và JavaScript – Chào mừng các bạn đến với blog cá nhân của mình. Trọng bài viết đầu tiên này , mình muốn giới thiệu cho bạn một hiệu ứng độc đáo để bạn có thể nhanh chóng áp dụng vào các dự án thiết kế trang web của mình . Hiệu ứng này được thực hiện với CSS và JavaScript mang lại kết quả là: Bạn đưa chuột đến đâu thì hiệu ứng chạy theo đến đó.

Hiệu ứng chuột cực độc với CSS và JavaScript

Hiệu ứng chuột cực độc với CSS và JavaScript javascript - Hiệu ứng chuột cực độc với CSS và JavaScript
Hiệu ứng chuột cực độc với CSS và JavaScript

Chúng ta sẽ cần CSS và JavaScript và đừng quên chèn link bên dưới trước thẻ </ head> nhé:

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222599/canvas.js"></script>

Tiếp theo là CSS:

html {
	overflow: hidden;
	-ms-touch-action: none;
	-ms-content-zooming: none;
	user-select: none;
}
body {
	position: absolute;
	margin: 0px;
	padding: 0px;
	background: #000; 
	width: 100%;
	height: 100%;
}
canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000; 
}

Và không thể thiếu JS cho hiệu ứng này:

! function() {
		"use strict";
		var canvas = new ge1doot.Canvas();
		var ctx = canvas.ctx;
		var pointer = canvas.pointer
		var blobs = [],
				Ni = 48,
				rad = 100;
		for (var i = 0; i < Ni; i++) {
				blobs.push(
						new Blob(
								rad * Math.cos((2 * Math.PI) / Ni * i),
								rad * Math.sin((2 * Math.PI) / Ni * i)
						)
				);
		}

		function Blob(x, y) {
				this.blob = document.createElement('canvas');
				this.blob.width = this.blob.height = rad * 2;
				var ict = this.blob.getContext('2d');
				ict.fillStyle = "#f00";
				ict.arc(rad, rad, rad, 0, 2 * Math.PI);
				ict.fill();
				this.x = x;
				this.y = y;
				this.x0 = x;
				this.y0 = y;
				this.r = rad * rad * 1.6;
		}
		Blob.prototype.anim = function() {
				var dx = pointer.x - this.x - canvas.width * 0.5;
				var dy = pointer.y - this.y - canvas.height * 0.5;
				var d = Math.sqrt(dx * dx + dy * dy);
				this.x = this.x - this.r / d * (dx / d) + (this.x0 - this.x) * 0.5;
				this.y = this.y - this.r / d * (dy / d) + (this.y0 - this.y) * 0.5;
				ctx.drawImage(
						this.blob,
						canvas.width * 0.5 + this.x - rad,
						canvas.height * 0.5 + this.y - rad
				);
		}

		function loo