Code Hoa Rơi theo Chuột

Đoạn javascript dưới đây sẽ tạo hiệu ứng hoa rơi khi bạn di chuyển chuột, khi di chuyển đến đâu, sẽ có những bông hoa li ti theo đó, tạo cho Website thêm sinh động bớt nhàm chán

Tham gia kênh Telegram của AnonyViet 👉 Link 👈

Cách 1: Thêm đoạn code dưới đây vào Website của bạn:

Các bài viết liên quan

<script type="text/javascript" src="https://anonyviet.com/resource/mouse/mousehoa.js?v=4640385"></script>

Cách 2:

Bước 1: Thêm đoạn Code dưới đây vào Website của bạn

<script type="text/javascript" src="mousehoa.js?v=4640385"></script>

Bước 2: Bạn dùng Notepad tạo 1 File với tên “mousehoa.js” với nội dung dưới đây. Đặt chung với File “mousehoa.js” chung thư mục các file của trang Web bạn

$(document).on('mousemove', function(e) {
	function function_name(argument) {
		// body...
	}
	var xMouse = e.pageX;
	var yMouse = e.pageY;
	if (Math.random() < 0.1) {
		setTimeout(function() {
			var l = document.createElement("DIV");
			var size = (Math.floor(Math.random() * (30 - 10)) + 10);
			l.style.width = size + "px";
			l.style.height = size + "px";
			l.style.backgroundImage = "url(https://anonyviet.com/resource/mouse/hoaroi.png)";
			var bg_pos = (Math.floor(Math.random() * 4));
			l.style.backgroundPosition = "0px -"+(size*bg_pos)+"px";
			l.style.backgroundSize = size + "px "+4*size+"px"
			l.style.position = "absolute";
			l.style.left = (xMouse) + "px";
			l.style.top = (yMouse + 10) + "px";
			l.style.zIndex = 9999;
			l.style.display = 'none';
			document.body.appendChild(l);
			$(l).fadeIn(100);
			var stop = false;
			var hoaroi = function() {
				if (!stop) {
					setTimeout(function() {
						window.requestAnimationFrame(hoaroi);
					}, 20);
					l.style.top = (parseInt($(l).css('top'), 10) + 1) + "px";
					if ((parseInt($(l).css('top'), 10)) % 10 == 0) {
						if (Math.random() < 0.5) {
							l.style.left = (parseInt($(l).css('left'), 10) + 1) + "px";
						} else {
							l.style.left = (parseInt($(l).css('left'), 10) - 1) + "px";
						}
					}
				}
			}
			window.requestAnimationFrame(hoaroi);
			$(l).fadeOut((Math.floor(Math.random() * (2500 - 1000)) + 1000), function() {
				$(l).remove();
				stop = true;
			});
		}, 50);
	}
});