Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo trang landing page kèm hiệu ứng di chuyển chuột cho trang web bằng HTML CSS và Javascript nhé!
Tạo Cấu Trúc Cho Landing Page
Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với Bootstrap v4.5.3, Font Awesome v4.7 và Google Font thông qua đoạn mã 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>Tạo Landing page kèm hiệu ứng chuột</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Thêm Các Phần Tử Cần Thiết Cho Landing Page
Trong phần này chúng ta sẽ đi vào thêm các thẻ HTMl cần thiết để tạo trang landing page thông qua đoạn mã sau nhé:
HTML
<div class="container-fluid " id="container">
<div class="row">
<div class="col-md-12">
<div class="logo">
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/landing_page_va_hieu_ung_chuot/Pexels%20Videos%201860079.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="col-md-6">
<div class="text">
<div class="text-alignment">
<h2 class="text-white text-center">
<span class="bg-primary p-2 rounded"><b>Niềm Vui Lập Trình</b></span>
</h2>
<div class="text-sub">
Lorem ipsum dolor sit, amet consectetur adipisicing elit....
</div>
<div class="input">
<input type="text" class="form-control rounded-pill" placeholder="Địa Chỉ Email Của Bạn">
<div class="input-group-append ">
<button class="btn btn-large btn-primary">
<a class="text-white" href="https://www.niemvuilaptrinh.com/">Truy Cập Trang</a>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 content-image ">
<img class="img-fluid" src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/tao_header_background_animation/hinh_anh_vi_du.png" alt="">
<div class="text-social social-icon">
<ul class="icons">
<li><a href="https://www.facebook.com/Ni%E1%BB%81m-Vui-L%E1%BA%ADp-Tr%C3%ACnh-103123311194043/"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com/ThiVitNht3"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
<canvas class=" sketch" height="199" width="1366" style="height: 100%; width: 1366px;"></canvas>
</div>
Và kết quả bạn xem hình ảnh bên dưới nhé:
Thiết Lập Vị Trí Video Cho Landing Page
Phần tiếp theo chúng ta sẽ đi vào sử dụng CSS để thiết lập vị trí video background và thêm các thuộc tính font chữ, khoảng cách cho thẻ body thông qua đoạn mã sau nhé:
CSS
body,
html {
margin: 0;
padding: 0;
border: 0;
font-family: 'Roboto', sans-serif;
}
.content-image{
margin-top: 10%;
}
.text{
margin-top: 25%;
}
video {
position: absolute;
top: 28%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
box-shadow: 0 1px 1px rgba(0,0,0,0.12),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.12),
0 8px 8px rgba(0,0,0,0.12),
0 16px 16px rgba(0,0,0,0.12);
}
Và kết quả bạn xem video sau nhé:
Thiết Lập Style Cho Nội Dung
Phần tiếp theo chúng ta sẽ đi vào thiết lập style cho nội dung của trang landing page như là đoạn văn giới thiệu, nút kêu gọi hành động, ô input để khách hàng nhập email... Và để hiểu rõ hơn bạn xem đoạn mã sau nhé:
CSS
canvas {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
display: block;
-ms-touch-action: none;
touch-action: none;
z-index: 1;
}
.text-sub {
font-size: 20px;
color: #fff;
line-height: 1.5;
margin: 40px auto 50px auto;
}
.text-alignment {
margin-left: auto;
margin-right: auto;
}
.btn {
padding: 8px 35px 8px 35px;
font-size: 16px !important;
color: rgba(255, 255, 255) !important;
border-radius: 100px !important;
text-align: center;
text-decoration: none;
z-index: 10;
border: 0 solid transparent;
transition: 0.8s;
background-size: 200% auto;
box-shadow: 0 1px 1px rgba(0,0,0,0.12),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.12),
0 8px 8px rgba(0,0,0,0.12),
0 16px 16px rgba(0,0,0,0.12);
}
.input-group-append {
margin-left: 33.33% !important;
margin-top: 2em;
}
.form-control {
display: block;
width: 100%;
height: cacl(1.5em + 0.75rem + 2px);
padding: 24px;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
position: relative;
z-index: 10;
}
.form-control .input input{
z-index: 10;
}
Mình có một lưu ý là thuộc tính canvas sẽ được sử dụng để làm hiệu ứng di chuyển chuột ở trong phần Javascript nha. Bây giờ chúng ta sẽ xem kết quả của đoạn mã trên nhé:
Thiết Lập Style Cho Các Icon Mạng Xã Hội
Trong phần này chúng ta sẽ đi vào thiết lập style và hiệu ứng hover cho các icon mạng xã hội thông qua đoạn mã sau nhé:
CSS
.text-social{
position: relative;
z-index: 100;
}
ul.icons li {
text-align: center;
display: inline-block;
list-style: none;
cursor: pointer;
font-size: 30px;
margin-left: 25px;
}
ul.icons li i.fa-facebook {
width: 60px;
height: 60px;
background-color: transparent;
color: #3b5998;
border-radius: 50px;
transition: 0.8 ease;
padding-top: 14px;
}
ul.icons li i.fa-facebook:hover {
color: white;
background-color: #3b5998;
z-index: 100;
margin-left: 33.33% !important;
}
ul.icons li i.fa-twitter {
width: 60px;
height: 60px;
background-color: transparent;
color: #00acee;
border-radius: 50px;
transition: 0.8 ease;
padding-top: 14px;
}
ul.icons li i.fa-twitter:hover {
color: white;
background-color: #00acee;
}
ul.icons li i.fa-linkedin {
width: 60px;
height: 60px;
background-color: transparent;
color: #0e76a8;
border-radius: 50px;
transition: 0.8 ease;
padding-top: 14px;
}
ul.icons li i.fa-linkedin:hover {
color: white;
background-color: #0e76a8;
}
ul.icons li i.fa-instagram {
width: 60px;
height: 60px;
background-color: transparent;
color: #e4405f;
border-radius: 50px;
transition: 0.8 ease;
padding-top: 14px;
}
ul.icons li i.fa-instagram:hover {
color: white;
background-color: #e4405f;
}
Và kết quả bạn xem hình ảnh dưới đây nha:
Thiết Lập Hiệu Ứng Di Chuyển Chuột
Trong phần này chúng ta sẽ sử dụng thư viện sketch.js để tạo hiệu ứng di chuyển chuột cho trang web. Và để thiết lập hiệu ứng cho dự án dễ dàng hơn thì bạn chỉ cần tải hai file JS bên dưới và liên kết chúng với file HTML hiện tại là có thể sử dụng rồi nha!
Nếu bạn muốn tìm hiểu thêm về thư viện sketch.js thì có thể xem ở đây nhé!
Còn bây giờ chúng ta sẽ xem kết quả khi gán hai file JS đó vào nha:
Còn dưới đây là dự án trên Codepen nha:
Nếu bạn muốn tải source code thì có thể xem đường link bên dưới nhé:
Nếu bạn muốn tham khảo thêm các ví dụ landing page template free thì truy cập đường dẫn bên dưới nha.
Landing Page Template Free
Nếu bạn muốn tham khảo thêm các ví dụ landing page css javascript thì truy cập đường dẫn bên dưới nha.
Landing Page CSS Javascript
Nếu bạn muốn tham khảo thêm các thiết kế landing page đẹp thì truy cập đường dẫn bên dưới nha.
Thiết Kế Landing Page Đẹp
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức tạo landingpage và hiệu ứng di chuyển chuộtdà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ẻ!
