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 loop(el) {
				el.anim();
		}

		function run() {
				requestAnimationFrame(run);
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				blobs.forEach(loop);
		}
		pointer.y = 10000;
		run();
}();

Thế Thôi

Ngay bây giờ, mời các bạn cùng xem Demo bên dưới và link trên codepen tại đây: https://codepen.io/laivanduc/pen/ZGRQJo

4 Comments
  1. Minh vũ nói

    Hiệu ứng hay quá anh ơi.

  2. Cheng nói

    Cho hỏi cái kết quẻ hiện thị ở cuối bác dùng plugin hay gì thế nhỉ (Result)
    Cảm ơn bác.

    1. Admin nói

      Bác lại bị em lừa tình rồi. Em gán Code ở codepen 🙂 Nhưng tùy chỉnh lại nền trắng. Gốc đây bác:
      http://codepen.io/laivanduc/pen/ZGRQJo

  3. […] bài viết này chúng ta sẽ cùng nhau tạo ra một hồ sơ cá nhân (Profile Card) bằng CSS và HTML. Cùng với những thông tin cơ bản mà bạn muốn hiển thị, hoặc bạn có […]

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.