Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu cách thiết kế và tạo hiệu ứng smooth scroll và parallax cho trang web bằng HTML, CSS, Javascript nhé!
Cách Tạo Hiệu Ứng Smooth Scroll và Parallax
Trước khi đi vào ví dụ thì mình có lưu ý là image trong hiệu ứng này thì bạn có thể lựa chọn tùy vào sở thích của mình nhé. Nếu bạn muốn sử dụng các hình ảnh có sẵn trong ví dụ thì có thể tải ở đây nhé.
Đầu tiên chúng ta cần tạo file index.html(Nơi lưu trữ cấu trúc phần tử HTML) và style.css(Nơi lưu trữ thuộc tính CSS). Sau đó sẽ liên kết chúng với nhau bằng đ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 Hiệu Ứng Smooth Scroll và Parallax</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Tiếp theo chúng ta sẽ đi vào xây dựng cấu trúc phần tử HTML bao gồm thanh tiêu đề và nội dung cho trang web thông qua đoạn mã dưới đây nhé:
HTML
<nav id="main-menu">
<ul>
<li>
<a class="item" href="#section1">Trang Chủ</a>
</li>
<li>
<a class="item" href="#section2">Thông Tin Về Chúng Tôi</a>
</li>
<li>
<a class="item" href="#section3">Liên Hệ</a>
</li>
<li>
<a class="item" href="#section4">Bộ Sưu Tập</a>
</li>
<li>
<a class="item" href="#section5">Thành Viên Team</a>
</li>
</ul>
</nav>
<section id="section1">
<h1>Trang Chủ</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat explicabo expedita, tenetur itaque, obcaecati suscipit reiciendis soluta eveniet eaque cupiditate dolorem distinctio possimus voluptatem vitae, maxime animi id sed porro? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos repellendus dolores sequi eos, tempore reprehenderit voluptatibus magnam quibusdam rerum temporibus similique aspernatur impedit numquam libero odio dolore aliquid, facere natus. </p>
</section>
<section id="section2">
<h1>Thông Tin Về Chúng Tôi</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat explicabo expedita, tenetur itaque, obcaecati suscipit reiciendis soluta eveniet eaque cupiditate dolorem distinctio possimus voluptatem vitae, maxime animi id sed porro? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos repellendus dolores sequi eos, tempore reprehenderit voluptatibus magnam quibusdam rerum temporibus similique aspernatur impedit numquam libero odio dolore aliquid, facere natus. </p>
</section>
<section id="section3">
<h1>Liên Hệ</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat explicabo expedita, tenetur itaque, obcaecati suscipit reiciendis soluta eveniet eaque cupiditate dolorem distinctio possimus voluptatem vitae, maxime animi id sed porro?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos repellendus dolores sequi eos, tempore reprehenderit voluptatibus magnam quibusdam rerum temporibus similique aspernatur impedit numquam libero odio dolore aliquid, facere natus. </p>
</section>
<section id="section4">
<h1>Bộ Sưu Tập</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat explicabo expedita, tenetur itaque, obcaecati suscipit reiciendis soluta eveniet eaque cupiditate dolorem distinctio possimus voluptatem vitae, maxime animi id sed porro?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos repellendus dolores sequi eos, tempore reprehenderit voluptatibus magnam quibusdam rerum temporibus similique aspernatur impedit numquam libero odio dolore aliquid, facere natus. </p>
</section>
<section id="section5">
<h1>Thành Viên Team</h1>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat explicabo expedita, tenetur itaque, obcaecati suscipit reiciendis soluta eveniet eaque cupiditate dolorem distinctio possimus voluptatem vitae, maxime animi id sed porro?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos repellendus dolores sequi eos, tempore reprehenderit voluptatibus magnam quibusdam rerum temporibus similique aspernatur impedit numquam libero odio dolore aliquid, facere natus. </p>
</section>
Việc thiết lập id cho từng section sẽ có nhiệm vụ chính giúp chúng ta tạo ra hiệu ứng smooth scrool bằng javascript khi người dùng chọn các đường dẫn trên navigation. Kết quả đoạn mã trên bạn xem hình ảnh ở bên dưới nhé:
Tiếp theo chúng ta sẽ đi vào thiết lập font cho nội dung văn bản cũng như tinh chỉnh lại vị trí, hiệu ứng hover và thiết lập style cho thanh tiêu đề thông qua đoạn mã CSS sau nhé:
CSS
*{
box-sizing: border-box;
}
body{
margin: 0;
color: #ecf0f1;
font-family: 'Open Sans', sans-serif;
}
ul{
list-style: none;
}
ul li {
display: inline-block;
padding: 10px 15px;
}
nav a{
color: #ecf0f1;
text-decoration: none;
text-transform: 15px 20px;
padding: 15px 20px;
border-radius: 8px;
}
nav a:hover{
background-color: DeepSkyBlue;
color: #fff;
}
nav a.active{
background: DeepSkyBlue;
}
Và kết quả bạn xem ở dưới đây nhé:
Bước tiếp theo chúng ta sẽ đi vào thiết lập style CSS cho thẻ section cũng như thêm ảnh vào id #section1 thông qua đoạn mã dưới đây nhé:
CSS
#main-menu{
position: fixed;
text-align: center;
}
section{
width: 100%;
margin: 0;
padding: 100px;
}
p{
width: 45%;
color:#fff;
}
#section1{
background-image: url(https://images.pexels.com/photos/1371360/pexels-photo-1371360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-size: cover;
height:100vh;
background-position: center;
}
Và kết quả của đoạn code trên bạn xem ở bên dưới nhé:
Bây giờ chúng ta sẽ tạo hiệu ứng parallax bằng thuộc tính background-attachment và background-size cho từng section còn lại thông qua đoạn code sau nhé:
CSS
#section2{
background-image: url(https://images.pexels.com/photos/672358/pexels-photo-672358.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-size: cover;
background-attachment: fixed;
background-position: center;
}
#section3{
background-image: url(https://images.pexels.com/photos/939729/pexels-photo-939729.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-size: cover;
background-position: center;
}
#section4{
background-image: url(https://images.pexels.com/photos/450441/pexels-photo-450441.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-attachment: fixed;
background-position: center;
}
#section5{
background-image: url(https://images.pexels.com/photos/1687845/pexels-photo-1687845.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-size: cover;
background-position: center;
}
Và kết quả bạn xem ở video bên dưới nhé:
Bước tiếp theo chúng ta sẽ đi vào viết mã bằng Jquery để hiển thị đường dẫn đang được active cũng như hiệu ứng smooth scroll cho trang web thông qua đoạn code sau nhé:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="smooth-scroll.js"></script>
<script>
$(document).ready(function() {
$("section").height($(window).height());
onWindowResize();
$(".item").click(function(){
$('nav a').removeClass("active");
$(this).addClass("active");
})
})
var onWindowResize = function() {
$(window).resize(function(event){
$("section").height($(window).height());
})
}
</script>
Với file smooth-scroll.js thì bạn tải ở đây nhé!
Bây giờ chúng ta sẽ xem kết quả cuối cùng của ví dụ này ở video bên dưới nhé:
Và nếu bạn muốn xem phiên bản Codepen thì có thể truy cập ở đây nha
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 những hiệu ứng smooth scroll và parallax 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ẻ!
