Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Header Wave Bằng HTML CSS

Cách Tạo Header Wave Bằng HTML CSS


Ngày 14 Tháng 10 Năm 2020

Cách Tạo Header Wave Bằng HTML CSS

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo header wave bằng HTML, CSS và Javascript nhé!

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

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 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 Header Gợn Sóng</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Thêm Các Phần Tử HTML và CSS Cho Header Wave

Trong phần này chúng ta sẽ thêm các phần tử HTML cần thiết để tạo header wave cho trang web thông qua đoạn mã bên dưới nhé:

HTML

<div class="container">
    <!-- Bắt Đầu Nội Dung Cho Header-->
    <div class="content">
        <div class="title">Header Gợn Sóng Bằng HTML CSS</div>
        <div class="text">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis possimus quaerat dolore quidem!
            Eligendi exercitationem voluptate sequi excepturi nihil alias, eveniet sed vero numquam porro adipisci eum,veniam odio enim?
        </div>
    </div>
    <!--Kết Thúc Nội Dung Cho Header-->

    <!-- Bắt Đầu Footer Cho Header-->
    <div class="footer">
        <a href="" class="button">Niềm Vui Lập Trình</a>
    </div>
    <!-- Kết Thúc Footer Cho Header-->

    <!-- Bắt Đầu  Hiệu Ứng Gợn Sóng-->
    <div class="wave"></div>
    <div class="wave wave2"></div>
    <div class="wave wave3"></div>
    <!-- Kết Thúc Hiệu Ứng Gợn Sóng-->
</div>

Bước tiếp theo chúng ta sẽ đi vào thiết lập vị trí, font chữ, màu sắc... cho nội dung của header wave thông qua đoạn mã CSS bên dưới nha:

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
    text-align: center;
    line-height: 1.4;
    width: 100%;
}
.container{
    height: 100vh;
}
.content{
    color: #000;
    padding: 0 2rem;
}

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

Header wave Phần 1

Thiết Lập Style Cho Nội Dung Trong Header Wave

Tiếp theo chúng ta sẽ sử dụng CSS để thiết kế lại nội dung trong phần header và đặt trước các hiệu ứng chuyển động animation vào trong các phần tử (phần sau chúng ta sẽ tạo các hiệu ứng này nhé) thông qua thuộc tính animation của CSS. Để hiểu rõ hơn bạn xem đoạn mã sau nha:

CSS

.content{
    color: #000;
    padding: 0 2rem;
}
.container, .content, .footer{
    display: flex;
    align-items: center;
    justify-content: center;
}
.content, .footer{
    width: 100%;
    position: relative;
    z-index: 10;
}
.container, .content{
    flex-direction: column;
}
.footer{
    flex-wrap: wrap;
    max-width: 600px;
    animation: hieu_ung_wave 0.5s 0.5s forwards;
}
.footer a{
    text-decoration: none;
    max-width: 40%;
    padding: 12px 18px;
    margin: 20px auto 0 auto;
    cursor: pointer;
    color: #000;
    border: 2px solid;
    outline: none;
    transition: all 0.3s;
    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);
}
.footer a:hover{
    background-color: #fff;
    color: #222;
    background-color: #fff;
     }
.text, .title{
    backface-visibility: hidden;
}
.title{
    font-size: 6rem;
    font-weight: 500;
    animation: hieu_ung_wave 0.5s fowards;
    color: #000;
}
.text{
    max-width: 50rem;
    font-weight: 500;
    font-size: 1.4rem;
    padding: 2rem 0;
    color: #000;
    animation: hieu_ung_wave 0.5s 0.3s fowards;
}

Kết quả của đoạn mã trên bạn xem ở bên dưới nha:

Header wave Phần 2

Thiết Lập Hiệu Ứng Chuyển Động Gợn Sóng Cho Header

Phần đầu tiên chúng ta sẽ dùng các thuộc tính cơ bản CSS để thiết lập style cho các phần tử HTML của hiệu ứng gợn sóng ( class .wave, class .wave2, class .wave3) thông qua đoạn mã dưới đây nhé:

CSS

.wave{
    opacity: 0.6;
    position: absolute;
    bottom: 40%;
    left: 50%;
    width: 6000px;
    height: 6000px;
    background: #000;
    margin-left: -3000px;
    transform-origin: 50% 48%;
    border-radius: 46%;
    animation: wave 12s infinite linear;
    pointer-events: none;
}
.wave2{
    animation: wave 28s infinite linear;
    opacity: 0.3;
}
.wave3{
    animation: wave 20s infinite linear;
    opacity: 1;
}
.wave{
    background: #000;
}
.container{
    position: relative;
    background-color: #2389da;
    z-index: 9;
}

Phần tiếp theo chúng ta sẽ đi vào sử dụng @keyframes để tạo hiệu ứng chuyển động cho hai thành phần chúng ta đã đặt tên trước đó là hieu_ung_wavewave. Để nắm rõ hơn bạn xem đoạn mã sau nhé:

CSS

@keyframes hieu_ung_wave{
    from{
        transform: translateY(2rem);
        opacity: 0;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes wave{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
.text{
    color: #fff;
}
.footer a{
    color: #fff;
}
.title{
    color: #fff;
}

Và kết quả cuối cùng của hiệu này bạn xem video bên dưới nhé:

Và đây là dự án trên Codepen nhé: (Bạn phải chuyển sang chế độ screen 0.5x, 0.25x thì mới thấy rõ được hiệu ứng):

See the Pen Hieu Ung Gon Song Cho Header by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

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 hiệu ứng gợn sóng cho hearder 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ẻ!