Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu cách thiết kế hiệu ứng hover cho trang web bằng thư viện Vanillla-tilt.js và HTML, CSS, Javascript nhé!
Tạo Hiệu Ứng Hover Với Thư Viện Vanillla-tilt.js
Thư viện Vanillla-tilt.js giúp bạn có thể tạo hiệu ứng hover 3D theo sự di chuyển của con trỏ chuột (mouse move) một cách dễ dàng. Nếu bạn muốn tìm hiểu thêm thì có thể xem ở đây nhé.
Đầu tiên thì mình sẽ giới thiệu sơ qua về cấu trúc thư mục folder của chúng ta nhé:
index.html: Chứa cấu trúc phần tử HTMl và đoạn mã khởi động thư viện Vanillla-tilt.js bằng Javascript cho đối tượng.style.css: Nới chứa các thuộc tính CSS của đối tượng.VanillaTilt.js: Nơi chứa đoạn mã của thư viện. Bạn có thể tải ở trang chủ mình để ở phía trên hoặc tải trực tiếp ở đường dẫn ở đây nhé- Đường dẫn chứa hình ảnh để tạo hiệu ứng này:
Sau khi đã có các tài nguyên để tạo hiệu ứng này thì bước tiếp theo chúng ta sẽ tạo cấu trúc file HTML cơ bản và liên kết chúng với file style.css, VanillaTilt.js thông qua đoạn mã bên dưới đây nhé:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hiệu Ứng Hover Với Vanilla Tilt.js</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
<script src="VanillaTilt.js"></script>
</html>Bước kế tiếp chúng ta sẽ thêm cấu trúc các phần tử HTML để thực hiện hiệu ứng thông qua đoạn mã sau nhé:
HTML
<div class="container">
<div class="box">
<div class="imgBg">
<img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1599532976/Hieu_Ung_Hover_tiltjs/pexels-quang-anh-ha-nguyen-884977_1_s2hjve.jpg" alt="Hình Ảnh 1">
</div>
<div class="contentBg">
<h2>Tiêu Đề Nội Dung</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat dicta reiciendis delectus totam quis explicabo quam, beatae mollitia repudiandae magnam debitis vel modi necessitatibus quo. Vitae animi quae vel debitis.</p>
</div>
</div>
</div>
Và kết quả của đoạn mã HTML trên bạn xem bên dưới nhé:
Tiếp theo chúng ta sẽ thêm các đoạn mã CSS để thiết lập khoảng cách, vị trí hiển thị, chiều dài... của các đối tượng trong HTML trong qua đoạn mã sau đây nhé:
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 50px 0;
transform-style: preserve-3d;
}
.container .box{
position: relative;
width: 640px;
height: 426px;
margin: 60px 0;
background: #000;
transform-style: preserve-3d;
}
Và kết quả của đoạn mã CSS trên bạn xem bên dưới nhé:
Tiếp theo chúng ta sẽ tạo hiệu ứng khi người dùng hover vào hình ảnh sẽ hiển thị nội dung thông qua đoạn mã CSS dưới đây nha:
CSS
.container .box .imgBg{
top: 0;
left:0;
width: 100%;
height: 100%;
}
.container .box .contentBg{
position: absolute;
top: 50%;
left: 50px;
right: 50px;
background: #fff;
transform: translateZ(20px) scaleY(0);
padding: 40px 25px;
transform-origin: top;
transition: 0.5s;
transform-style: preserve-3d;
}
.container .box:hover .contentBg{
transform: translateZ(20px) scaleY(1);
}
.container .box:hover{
box-shadow: 0 50px 80px rgba(0,0,0,0.3);
}
Và kết quả của đoạn mã CSS trên bạn xem bên dưới nhé:
Tiếp theo chúng ta sẽ thực hiện thành phần quan trọng nhất của hiệu ứng hover này đó là đối tượng được hover sẽ di chuyển theo con trỏ chuột thông qua việc khởi tạo thư viện Vanillla-tilt.js trong đoạn mã sau đây:
<script type="text/javascript">
VanillaTilt.init(document.querySelector(".box"), {
max: 25,
speed: 400
});
</script>Và kết quả cuối cùng của chúng ta bạn xem ở bên dưới nhé:
See the Pen Hieu Ung Hover 3D MouseMove by haycuoilennao19 (@haycuoilennao19) on CodePen.
Bạn chuyển chuyển sang chế độ screen 0.5x hay 0.25x để thấy rõ hơn nhé!
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn về kiến thức tạo hiệu ứng hover 3D với thư viện Vanillla-tilt.js hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
