Cách làm cho trang web của bạn trở nên thích ứng và tương tác với CSS và JavaScript
Có một trang web đáp ứng và tương tác là một yêu cầu bất thành văn đối với mọi chủ sở hữu trang web. Không thể phóng đại lợi ích của việc có một trang web tương tác có thể điều chỉnh hoàn hảo theo bất kỳ kích thước màn hình nào.
Bạn nên tạo trải nghiệm được cá nhân hóa cho mọi người dùng truy cập trang web của bạn và với một số thuộc tính CSS và một vài hàm JavaScript, bạn có thể làm được điều đó.
Trong bài viết hướng dẫn này, bạn sẽ học cách làm cho trang web HTML và CSS của mình trở nên phản hồi và tương tác.
Mục Lục
Làm cho trang web của bạn tương tác
Khi bạn đang xây dựng một trang web, bạn bắt đầu từ trên xuống. Do đó, làm cho trang web của bạn tương tác là một quá trình cũng nên bắt đầu từ đầu. Lấy trang web danh mục đầu tư mà chúng tôi đã xây dựng này làm ví dụ. Nó có một thiết kế sạch sẽ nhưng nó không hoàn toàn tương tác.
Mỗi mục menu sẽ thay đổi màu sắc khi bạn di chuột qua nó, nhưng làm thế nào để bạn biết bạn đang ở phần nào của trang web? Chà, có hai cách để làm điều đó — kích hoạt các mục menu bằng suối nước nóng và trong một cái nhấp chuột sự kiện.
Việc kích hoạt một mục menu mỗi khi bạn cuộn lên hoặc cuộn xuống một trang web sẽ yêu cầu sử dụng một hàm JavaScript mà bạn có thể gọi là “activeMenu”. Chức năng này sẽ cần quyền truy cập vào các mục menu trong thanh điều hướng, cũng như từng phần của trang web. May mắn thay, bạn có thể thực hiện điều này với việc sử dụng querySelectorAll Bộ chọn DOM.
Trong thư mục dự án của bạn, bạn sẽ cần tạo một tệp JavaScript mới và liên kết nó với tệp HTML của bạn bằng dòng mã sau:
<script src="main.js"></script>
Trong một script thẻ, src giá trị là tên của tệp JavaScript, trong ví dụ trên là main.js.
Tệp main.js
// using javascript to activate menu item onscroll
const li = document.querySelectorAll(".links");
const sec = document.querySelectorAll("section");function activeMenu(){
let len=sec.length;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach(ltx => ltx.classList.remove("active"));
li[len].classList.add("active");
}
activeMenu();
window.addEventListener("scroll", activeMenu);
Các querySelectorAll bộ chọn trong đoạn mã trên lấy tất cả các mục menu bằng cách sử dụng liên kết lớp học. Nó cũng lấy tất cả các phần của trang web bằng cách sử dụng tiết diện nhãn. Các kích hoạt sau đó hàm lấy độ dài của mỗi phần và xóa hoặc thêm một biến “hoạt động” tùy thuộc vào vị trí cuộn của người dùng.
Để mã ở trên hoạt động, bạn sẽ phải cập nhật biểu định kiểu trang web danh mục đầu tư để đưa mã sau vào phần thanh điều hướng:
#navbar .menu li.active a{
color: #fff;
}
//using jquery to activate menu item onclick
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})
Việc thêm mã ở trên vào tệp JavaScript của bạn sẽ kích hoạt từng phần khi người dùng nhấp vào mục menu thích hợp. Tuy nhiên, nó sử dụng jQuery (một thư viện JavaScript) để hoàn thành nhiệm vụ này sẽ chỉ cần một lượng mã tối thiểu.
Một vấn đề mà bạn có thể gặp phải khi kích hoạt từng mục menu khi nhấp chuột là thanh điều hướng sẽ che phần trên cùng của mỗi phần. Để tránh điều này, bạn có thể chỉ cần chèn mã sau vào phần tiện ích của biểu định kiểu:
section{
scroll-margin-top: 4.5rem;
}
Đoạn mã trên sẽ đảm bảo rằng khi bạn điều hướng đến từng phần bằng cách nhấp vào, thanh điều hướng sẽ ở 4,5rem phía trên mỗi phần (hoặc 72px). Một tính năng thú vị khác để thêm vào trang web của bạn là Cuộn trơn, bạn có thể thực hiện điều này với mã CSS sau:
html {
scroll-behavior: smooth;
}
Làm cho Trang chủ của bạn Tương tác
Trên hầu hết các trang web, người dùng sẽ thấy nút đầu tiên của họ trên thanh điều hướng hoặc trang chủ. Ngoài việc trông giống như một lời kêu gọi hành động, một nút cũng phải có tính tương tác. Một cách tuyệt vời để thực hiện điều này là với CSS :bay lượn bộ chọn, gán trạng thái mới cho một phần tử mỗi khi con chuột của người dùng chạy qua nó.
Trên trang web danh mục đầu tư, liên kết duy nhất trên trang chủ có btn lớp (mang lại cho nó sự xuất hiện của một nút). Vì vậy, để làm cho nút này tương tác, bạn có thể chỉ định :bay lượn bộ chọn cho btn lớp học.
Sử dụng: bộ chọn di chuột
.btn:hover{
background: #fff;
color:blue;
border: blue solid ;
border-radius: 5px;
}Thêm đoạn mã trên vào phần tiện ích của trang web danh mục đầu tư sẽ làm cho nút chuyển từ trạng thái này sang trạng thái khác khi bạn di chuột qua nó.
Một tính năng thú vị khác cho trang chủ là hoạt ảnh đánh máy, sử dụng typed.js (một kịch bản hoạt hình gõ jQuery).
Sử dụng typed.js
// jquery typing text animation script
var typed = new Typed(".typing", {
strings: ["Software Developer"],
typeSpeed: 100,
backSpeed: 60,
loop: true
});
Sau khi bạn thêm mã ở trên vào tệp JavaScript của mình, bạn sẽ cần thực hiện các thay đổi sau đối với HTML:
<div class="text-3">And I'm a <span class="typing"></span></div>
Trong đoạn mã trên, bạn thay thế văn bản “Nhà phát triển phần mềm” trong mã gốc bằng lớp “đánh máy”, tạo hoạt ảnh nhập.
Làm cho các phần khác của trang web của bạn tương tác
Tạo một lớp tiện ích nút và sử dụng bay lượn bộ chọn sẽ đảm bảo rằng mọi phần trên trang web của bạn có nút đều có tính tương tác. Các thuộc tính chuyển đổi và chuyển đổi CSS cũng có một số tính năng hoạt ảnh tuyệt vời mà bạn có thể thêm vào trang web của mình.
Nếu bạn có thư viện hoặc bất kỳ phần hình ảnh nào trên trang web của mình, bạn có thể sử dụng hai thuộc tính được đề cập ở trên để tạo hiệu ứng di chuột trên hình ảnh của mình. Thêm mã CSS sau vào các hình ảnh trong phần dự án của trang web danh mục đầu tư sẽ tạo ra hiệu ứng chuyển đổi trên các hình ảnh trong phần:
.img-container img{
max-width: 450px;
transition: all 0.3s ease-out;
cursor: pointer;
}.img-container img:hover{
transform: scale(1.2);
}
Làm cho trang web của bạn đáp ứng
Khi tạo trang web đáp ứng, có bốn loại thiết bị khác nhau mà bạn cần xem xét — máy tính để bàn, máy tính xách tay, máy tính bảng và điện thoại thông minh. Ngoài ra, mỗi loại thiết bị này cũng có một loạt các kích thước màn hình khác nhau, nhưng có bốn loại này là một nơi tốt để bắt đầu.
Ở trạng thái hiện tại, trang web danh mục đầu tư hiển thị tốt trên máy tính để bàn và máy tính xách tay. Vì vậy, làm cho nó phản hồi sẽ có nghĩa là tạo ra một bố cục tùy chỉnh cho máy tính bảng và điện thoại thông minh.
Cách tốt nhất để đạt được thiết kế đáp ứng với CSS và HTML là thông qua các truy vấn phương tiện. Bạn có thể đặt một truy vấn phương tiện trong tệp CSS hoặc HTML liên kết nhãn. Cách tiếp cận thứ hai tạo điều kiện cho khả năng mở rộng và đó cũng là phương pháp mà tôi sẽ chứng minh.
Bạn sẽ cần tạo thêm hai tệp CSS. Tệp CSS đầu tiên sẽ tạo cấu trúc bố cục cho máy tính xách tay và máy tính bảng nhỏ ở chế độ ngang. Nó sẽ có chiều rộng tối đa là 1100px, như bạn thấy trong thẻ liên kết sau:
<link rel="stylesheet" media="screen and (max-width: 1100px)" href="css/widescreen.css">
Chèn dòng mã ở trên trong cái đầu của tệp HTML của bạn (hoặc trong trường hợp này là tệp trang web danh mục đầu tư) sẽ đảm bảo rằng mọi thiết bị có chiều rộng màn hình là 1100px và dưới sẽ sử dụng kiểu trong màn hình rộng.css tập tin.
Tệp Widecreen.css
/* Home */
#navbar .container h1 a span{
display: none;
}#home .home-content .text-3 span{
color: #000000;
}
/* Portfolio */
.projects{
justify-content: center;
}
.project{
flex: 0;
}
/* About */
.about-content{
flex-direction: column;
}
/* Contact */
.contact-content{
flex-direction: column;
}
Đoạn mã trên sẽ tạo ra bố cục đáp ứng trên các thiết bị có kích thước màn hình từ 1100px trở xuống, như bạn có thể thấy trong đầu ra bên dưới:
Tệp CSS thứ hai sẽ tạo cấu trúc bố cục cho điện thoại thông minh và máy tính bảng ở chế độ dọc. Nó sẽ có chiều rộng tối đa là 760px, như bạn có thể thấy trong thẻ liên kết sau:
<link rel="stylesheet" media="screen and (max-width: 760px)" href="css/mobile.css">
Tệp mobile.css
/* Navbar */#navbar .container h1 a span{
display: none;
}
#navbar .container .menu{
margin-left: 0rem;
}
#ham-menu{
width: 35px;
height: 30px;
margin: 30px 0 20px 20px;
cursor: pointer;
}
#navbar .container .menu-wrap .menu{
display: none;
}
.bar{
height: 5px;
width: 100%;
background-color: #ffffff;
display: block;
border-radius: 5px;
transition: 0.3s ease;
}
#bar1{
transform: translateY(-4px);
}
#bar3{
transform: translateY(4px);
}
/* Home */
#home{
display: flex;
background: url("/images/home.jpg") no-repeat center;
height: 100vh;
}
#home .container{
margin: 6rem 1rem 2rem 1rem;
padding: 2rem;
}
#home .home-content .text-1{
font-size: 20px;
margin: 1.2rem;
}
#home .home-content .text-2{
font-size: 45px;
font-weight: 500;
margin: 1rem;
}
#home .home-content .text-3{
font-size: 22px;
margin: 1.2rem;
}
#home .home-content .text-3 span{
color: #0000ff;
font-weight: 600;
}
#home .container{
margin-left: 4.5rem;
}
/* About */
#about .container{
padding: 0;
}
/* Contact */
#contact .container{
padding: 0;
}
Tệp trên sẽ tạo ra bố cục điện thoại thông minh đáp ứng sau:
Các cách khác để tạo trang web tương tác đáp ứng
Biết cách làm cho trang web của bạn đáp ứng và tương tác bằng cách sử dụng CSS và HTML là một kỹ năng tuyệt vời cần có. Nhưng đây không phải là những phương pháp duy nhất để làm cho trang web của bạn đáp ứng và tương tác.
Nhiều khuôn khổ giao diện người dùng và thậm chí các mẫu trên các dịch vụ như Joomla tạo điều kiện cho các thiết kế tương tác đáp ứng.
Đọc tiếp
Giới thiệu về tác giả
