Chào mọi người, ở bài viết này mình sẽ mang đến cho các bạn cách tạo hiệu ứng với mousemove event trong js. Mặc dù mình không bị "viêm họng" nhưng mình thấy cái này rất "hay ho" nên giới thiệu với mọi người!
Giới thiệu và sơ lược về kết quả
Sau khi các bạn xem xong bài viết này có thể nắm được sơ lược về cách sử dụng mousemove event trong js, từ đó chúng ta có thể tạo nên nhiều các hiệu ứng cũng như áp dụng vào các dự án khác.
Dưới đây là sơ lược về kết quả của bài viết này :
Mousemove event và các thuộc tính và hàm cần sử dụng
Mình sẽ giới thiệu với các bạn về mousemove event và một vài thuộc tính mà mình sử dụng để tạo hiệu ứng trong bài viết này
Giới thiệu về mousemove event
mousemove các bạn có thể hiểu đơn giản cũng giống như tên của nó, tức là sự kiện khi con trỏ chuột di chuyển trên bề mặt của các phần tử. Khi ta sử dụng nó và di chuột thì event này sẽ cấp cho ta các thông tin để sử dụng vào việc code logic.
Chúng ta có thể console.log nó ra để xem chi tiết:
var handleMouseMove = function (event) {
console.log(event);
};
window.addEventListener("mousemove", handleMouseMove);Giới thiệu về các thuộc tính và hàm sẽ sử dụng
Ở trong phần này mình sẽ sử dụng đến : innerWidth, innerHeight, clientX, clientY
- innerWidth là lấy giá trị chiều rộng của thành phần tương ứng. ví dụ : window.innerWidth chính là chiều rộng của phần nội dung trên browser.
- innerHeight là lấy giá trị chiều cao của thành phần tương ứng ví dụ : window.innerHeight chính là chiều cao của phần nội dung trên browser.
- clientX, clientY là tọa độ hiện tại của con trỏ chuột trên màn hình browser tương ứng trục X, Y.
Xác định phạm vi hoạt động của con trỏ chuột
Đầu tiên chúng ta sẽ khởi tạo input bao gồm các thành phần start, end, current từ đó chúng ta sẽ xác định range chính là phạm vi hoạt động của chuột:
var input = {
mouseX: {
start: 0,
end: window.innerWidth,
current: 0,
},
mouseY: {
start: 0,
end: window.innerHeight,
current: 0,
},
};
input.mouseX.range = input.mouseX.end - input.mouseX.start;
input.mouseY.range = input.mouseY.end - input.mouseY.start;Tiếp theo chúng ta sẽ tạo function handleMouseMove để xác định thông số giá trị hiện tại của con chuột, giá trị này sẽ được tính là khoảng cách giữa vị trí hiện tại current và start tất cả chia cho range. Mình sẽ gọi tắt nó là fraction, fraction này sẽ được sử dụng để xác định phần output bên dưới:
var handleMouseMove = function (event) {
input.mouseX.current = event.clientX;
input.mouseX.fraction =
(input.mouseX.current - input.mouseX.start) / input.mouseX.range;
input.mouseY.current = event.clientY;
input.mouseY.fraction =
(input.mouseY.current - input.mouseY.start) / input.mouseY.range;
};
window.addEventListener("mousemove", handleMouseMove);Tạo output để thêm hiệu ứng di chuyển
Đầu tiên chúng ta sẽ tạo output cũng bao gồm các thành phần start, end, current, đây là các giá trị của phần tử mà chúng ta muốn thêm hiệu ứng vào:
var output = {
x: {
start: -75,
end: 75,
current: 0,
},
y: {
start: -75,
end: 75,
current: 0,
},
};
output.x.range = output.x.end - output.x.start;
output.y.range = output.y.end - output.y.start;Phần này chúng ta đang xác định vị trí và phạm vi hoạt động của phần tử sẽ thêm hiệu ứng, còn phần trên là của con trỏ chuột. Nên các bạn đừng nhầm lẫn nhé.
Tiếp theo, chúng ta sẽ sử dụng fraction của con trỏ chuột phần trước để tính vị trí chuyển động hiện tại của phần tử sẽ thêm hiệu ứng:
output.x.current = output.x.start + input.mouseX.fraction * output.x.range;
output.y.current = output.y.start + input.mouseY.fraction * output.y.range;Sau đó chúng ta sẽ sử dụng output.x.current và output.y.current để thêm hiệu ứng di chuyển:
pupilsArray.forEach(function (pupil, k) {
pupil.style.transform =
"translate(" + output.x.current + "px, " + output.y.current + "px)";
});Source code
Dưới đây, sẽ là tất cả code của phần này.
Code HTML:
<section class="effect">
<div class="eye eye1">
<div class="pupil">
</div>
</div>
<div class="eye eye2">
<div class="pupil">
</div>
</div>
<div class="moias">
</div>
</section>Code CSS:
.effect{
position:relative;
background-color:gray;
width:100%;
height: 1035px;
}
.eye{
background:#fff;
width: 200px;
height:200px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
overflow: hidden;
}
.moias{
position: absolute;
left: 45%;
bottom: 30%;
height:3px;
width:130px;
background:#fff;
}
.pupil{
background:#000;
width: 50px;
height:50px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
.eye1{
margin-left:-240px;
}
.eye2{
margin-left:-25px;
}Code JS:
//html setup
var pupilsHtml = document.getElementsByClassName("pupil");
var pupilsArray = Array.from(pupilsHtml);
//input setup
var input = {
mouseX: {
start: 0,
end: window.innerWidth,
current: 0,
},
mouseY: {
start: 0,
end: window.innerHeight,
current: 0,
},
};
input.mouseX.range = input.mouseX.end - input.mouseX.start;
input.mouseY.range = input.mouseY.end - input.mouseY.start;
//output setup
var output = {
x: {
start: -75,
end: 75,
current: 0,
},
y: {
start: -75,
end: 75,
current: 0,
},
};
output.x.range = output.x.end - output.x.start;
output.y.range = output.y.end - output.y.start;
var handleMouseMove = function (event) {
input.mouseX.current = event.clientX;
input.mouseX.fraction =
(input.mouseX.current - input.mouseX.start) / input.mouseX.range;
input.mouseY.current = event.clientY;
input.mouseY.fraction =
(input.mouseY.current - input.mouseY.start) / input.mouseY.range;
output.x.current = output.x.start + input.mouseX.fraction * output.x.range;
output.y.current = output.y.start + input.mouseY.fraction * output.y.range;
pupilsArray.forEach(function (pupil, k) {
pupil.style.transform =
"translate(" + output.x.current + "px, " + output.y.current + "px)";
});
console.log(output.x.current);
};
var handleResize = function () {
input.mouseX.end = window.innerWidth;
input.mouseX.range = input.mouseX.end - input.mouseX.start;
input.mouseY.end = window.innerHeight;
input.mouseY.range = input.mouseY.end - input.mouseY.start;
};
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("resize", handleResize);Tổng kết
Như vậy là ở bài viết này chúng ta đã tìm hiểu về cách tạo hiệu ứng với mousemove event. Hẹn gặp lại các bạn ở bài tiếp theo . Hãy theo dõi Wolfactive nhé.
Cảm ơn các bạn đã đón đọc. Các bạn có thắc mắc hay có vấn đề cần giải đáp thì hay inbox vào fanpage Wolfactive.