Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo 3D Navigation Bằng HTML, CSS Và Javascript

Tạo 3D Navigation Bằng HTML, CSS Và Javascript


Ngày 23 Tháng 9 Năm 2020

Tạo 3D Navigation Bằng HTML, CSS Và Javascript

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo 3D Navigation(thanh tiêu đề) trong trang web bằng HTML, CSS và Javascript nhé!

Tạo Cấu Trúc Phần Tử HTML

Trước tiên chúng ta sẽ cần tạo hai file chính là index.html (Lưu trữ phần tử HTML) và style.css (Lưu trữ các thuộc tính CSS). Sau đó liên kết chúng lại với nhau thông qua đoạn mã bên dưới:

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 3D Navbar</title>
    <link href="https://fonts.googleapis.com/css2?family=Epilogue:ital,[email protected],400;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Thêm Các Phần Tử HTML

Trong phần này chúng ta sẽ đi vào thêm các cấu trúc phần tử HTML cần thiết để tạo ra thanh tiêu đề 3D thông qua đoạn mã sau nhé:

HTML

<div class="container">
    <div class="navbar">
        <div class="menu">
            <h3 class="logo">Niềm Vui Lập Trình</h3>
            <div class="hamburger-menu">
                <div class="bar"></div>
            </div>
        </div>
    </div>
</div>

Xác Định Vị Trí Và Thiết Lập Font Cho Menu 3D

Phần tiếp theo chúng ta sẽ sử dụng các thuộc tính CSS để thiết lập font chữ cho nội dung trong trang web và xác định vị trí của thanh tiêu đề thông qua đoạn mã CSS sau nhé:

CSS

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Epilogue', sans-serif;
}
.container {
    min-height: 100vh;
    width: 100%;
    background-color: #485461;
    background-image: linear-gradient(135deg, #485461, #28313b 74%);
    overflow: hidden;
}
.navbar{
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    z-index: 10;
    height: 3rem;
}

Và kết quả bạn xem hình ảnh bên dưới nhé:

3D Menu 1

Thiết Lập Style Cho 3D Navbar

Trong phần này mình và bạn sẽ đi vào thiết kế icon đóng mở cho thanh tiêu đề cũng như thiết lập style cho thẻ div với class logo thông qua đoạn code sau nhé:

CSS

/*Thiết lập style thanh tiêu đề*/
.menu {
    max-width: 100%;
    width: 100%;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}
/*Thiết lập style cho div có class là logo*/
.logo{
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 4rem;
}
/*Tạo Icon Menu*/
.hamburger-menu{
    height: 4rem;
    width: 3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.bar{
    width: 1.9rem;
    height: 1.5px;
    border-radius: 2px;
    background-color: #fff;
    transition: 0.5s;
    position: relative;
}
.bar::before,
.bar::after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: #eee;
    transition: 0.5s;
}
.bar::before{
    transform: translateY(-9px)
}
.bar::after{
    transform: translateY(9px)
}

Và kết quả bạn xem hình ảnh bên dưới nhé:

3D Menu 2

Thêm Nội Dung Và Tiêu Đề Cho Trang Web

Phần này chúng ta sẽ thêm các phần tử HTML và các thuộc tính CSS để giúp làm nổi bật tiêu đề và nội dung ở trong trang web thông qua đoạn mã sau nhé:

HTML

<!--Nội Dung Cũ-->
<div class="container">
    <div class="navbar">
        <div class="menu">
            <h3 class="logo">Niềm Vui Lập Trình</h3>
            <div class="hamburger-menu">
                <div class="bar"></div>
            </div>
        </div>
    </div>
<!-- Kết Thúc Nội Dung Cũ-->
<!--Thêm Phần Tử Mới-->
    <div class="main-container">
        <div class="main">
            <header>
                <div class="overlay">
                    <div class="inner">
                        <h2 class="title">Xin Chào Các Bạn</h2>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non, debitis vel obcaecati amet recusandae magnam perferendis ad.</p>
                        <p class="btn-container">
                            <a href="https://www.niemvuilaptrinh.com/" class="btn">Xem Thêm</a>
                        </p>
                    </div>
                </div>
            </header>
        </div>
        <div class="shadow shadow1"></div>
        <div class="shadow shadow2"></div>
    </div>
<!--Kết Thúc Thêm Phần Tử Mới-->
</div>

Như bạn thấy thì phần nội dung mới mà mình thêm thì vẫn thuộc class cha .container nhé!

Và kết quả bạn xem hình ảnh bên dưới nhé:

3D Menu 3

Thiết Lập Style Cho Nội Dung Và Tiêu Đề

Phần này ngoài việc thiết lập style cho nội dung và tiêu đề trong trang web thì chúng ta sẽ thực hiện xây dựng background hình ảnh cho toàn bộ website thông qua đoạn mã sau nhé:

CSS

.main{
    position: relative;
    width: 100%;
    left: 0;
    z-index: 5;
    background-color: white;
    overflow: hidden;
}
header{
    min-height: 100vh;
    width: 100%;
    background: url(https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat top center / cover;
    position: relative;
}
.overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background-color: rgba(43,51,59,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}
.inner{
    max-width: 35rem;
    text-align: center;
    color: #fff;
    padding: 0 2rem;
}
.title{
    font-size: 3rem;
    margin-bottom: 1rem;
}
.btn-container{
    margin-top: 1.5rem;
}
.btn{
        padding: 0.6rem 1.8rem;
    background-color: #1179e7;
    border: none;
    border-radius: 25px;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
}

Và kết quả bạn xem hình ảnh bên dưới nhé:

3D Menu 4

Thiết Lập Javascript Cho 3D Navbar

Trong phần này chúng ta sẽ sử dụng Javascript để thiết lập class .active cho thẻ div container khi người dùng nhấn vào icon ở góc phải trên cùng thông qua đoạn mã sau đây nhé:

Javascript

 const hambuger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hambuger_menu.addEventListener("click", () => {
    container.classList.toggle("active");
})

Và kết quả bạn xem ở video bên dưới nhé:

Tạo Hiệu Ứng Chuyển Động Icon

Trong phần này chúng ta sẽ sử dụng animation để chuyển đổi từ icon 3 gạch ngang sang icon đóng (X) khi người dùng kích hoạt class active (nhấn vào icon) bằng đoạn mã CSS dưới đây nhé:

CSS

.container.active .bar{
    transform: rotate(360deg);
    background-color: transparent;
}
.container.active .bar::before{
   transform: translateY(0) rotate(45deg);
}
.container.active .bar::after{
    transform: translateY(0) rotate(-45deg);
}

Và kết quả bạn xem ở video bên dưới nhé:

Tạo Hiệu Ứng Chuyển Động 3D Cho Trang Web

Phần này chúng ta sẽ đi vào tạo hiệu ứng chuyển động 3D cho trang web thông qua đoạn mã sau nhé:

CSS

.main{
     transform-origin: left;
     transform-style: preserve-3d;
     transition: 0.5s;
 }
.container{
    transform-style: preserve-3d; 
 }
  .container.active .main{
    animation: main-animation 0.5s ease;
    cursor: pointer;
    transform: perspective(1300px) rotateY(20deg)  translateZ(310px) scale(0.5);
}
@keyframes main-animation{
    from{
        transform: translate(0);
    }
    to{
        transform: perspective(1300px) rotateY(20deg)  translateZ(310px) scale(0.5);
    }
}

Và kết quả bạn xem ở video bên dưới nhé:

Thêm Đường Dẫn Cho 3D Navbar

Trong phần này chúng ta sẽ thêm các đường dẫn vào thanh tiêu đề 3D thông qua đoạn code sau nhé (Đoạn mã sẽ được dặt trong class container ):

HTML

<div class="container">
    <div class="navbar">...</div>
    <div class="main-container">...</div>
    <!--Thêm Phần Tử Mới-->
    <div class="links">
        <ul>
            <li>
                <a href="#">Trang Chủ</a>
            </li>
            <li>
                <a href="#">Liên Hệ</a>
            </li>
            <li>
                <a href="#">Về Chúng Tôi</a>
            </li>
            <li>
                <a href="#">Dự Án</a>
            </li>
            <li>
                <a href="#">Dịch Vụ</a>
            </li>
            <li>
                <a href="#">Blog</a>
            </li>
        </ul>
    </div>
  <!--Kết Thúc Thêm Phần Tử Mới-->
</div>

CSS

.links{
    position: absolute;
    width: 30%;
    right: 0;
    top: 0;
    height: 100vh;
    z-index: 2;
    background: eee;
    display: flex;
    justify-content: center;
    align-items: center;
}
ul{
    list-style: none;
}
.links a{
    text-decoration: none;
    color: #eee;
    padding: 0.7rem 0;
    display: inline-block;
    font-size: 2rem;
    letter-spacing: 2px;
    transition: 0.3s;
    opacity: 0;
    transform: translateY(10px);
     }
.links a:hover{
    color: #fff;
}
/*Hiệu Ứng Hiển Thị 3D Nabar*/
.container.active .links a{
    animation: appear 0.5s forwards ease-in-out 0.5s;
}
@keyframes appear{
    from{
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}
/*Hiệu Ứng Ẩn 3D Nabar*/
.links a{
    animation: hide 0.5s forwards ease;
}
@keyframes hide{
    from {
        opacity: 1;
        transform: translateY(0px);
    }
    to{
        opacity: 0;
        transform: translateY(10px);
    }
}

Và kết quả bạn xem ở video bên dưới nhé:

Thiết Lập Shadow Cho 3D Navbar

Phần cuối cùng chúng ta cần thực hiện là thiết kế trang web khi chuyển sang chế độ 3D có thể trông thật nhất có thể thông qua đoạn mã CSS sau nhé:

CSS

.shadow{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   transform-style: preserve-3d;
   transform-origin: left;
}
.shadow.shadow1{
    z-index: -1;
    background-color: #fff;
    opacity: 0.15;
}
.container.active .shadow.shadow1{
    animation: shadow-one 0.6s ease-out;
    transform: perspective(1300px) rotateY(20deg)  translateZ(215px) scale(0.5);
}
@keyframes shadow-one{
    0%{
        transform: translate(0);
    }
    50%{
        transform: perspective(1300px) rotateY(20deg)  translateZ(310px) scale(0.5);
    }
    100%{
        transform: perspective(1300px) rotateY(20deg)  translateZ(215px) scale(0.5);
    }
}
.shadow.shadow2{
    z-index: -2;
    opacity: 0.1;
    background-color: #fff;
}
.container.active .shadow.shadow2{
    animation: shadow-two 0.6s ease-out;
    transform: perspective(1300px) rotateY(20deg)  translateZ(120px) scale(0.5);
}
@keyframes shadow-two{
    0%{
        transform: translate(0);
    }
    50%{
        transform: perspective(1300px) rotateY(20deg)  translateZ(310px) scale(0.5);     }
    100%{
        transform: perspective(1300px) rotateY(20deg)  translateZ(120px) scale(0.5);
    }
}
.container.active .main:hover + .shadow.shadow1{
    transform: perspective(1300px) rotateY(20deg)  translateZ(230px) scale(0.5);
}
.container.active .main:hover {
    transform: perspective(1300px) rotateY(20deg)  translateZ(340px) scale(0.5);
}

Và kết quả cuối cùng bạn xem ở video bên dưới nhé:

Ngoài ra bạn có thể xem trực tiếp trên Codepen ở đường dẫn này nhé!
Nguồn Tham Khảo: https://www.youtube.com/watch?v=nOcVOJw3Gfw&t=39s&ab_channel=TrueCoder

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức tạo 3D Navbar 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ẻ!