Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo background animation cho header trong website bằng HTML, CSS nhé!
Tạo Cấu Trúc Cho Header
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 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>Tao Hiệu Ứng Animation Cho Header</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Thêm Phần Tử HTML Cần Thiết Cho Header
Phần tiếp theo chúng ta sẽ đi vào thêm các thẻ cần thiết để tạo cấu trúc cho header background animation bằng đoạn mã dưới đây nhé:
HTML
<div class="page-header">
<section class="one" id="banner">
<span class="shape-1"></span>
<span class="shape-2"></span>
<span class="shape-3"></span>
<span class="shape-4"></span>
<div class="container">
<div class="hinh-anh">
<img src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/tao_header_background_animation/hinh_anh_minh_hoa.png" alt="Hình ảnh minh họa ">
</div>
<div class="row">
<div class="col-xl-6 col-lg-8">
<h3 class="title">Niềm Vui Lập Trình</h3>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas sit fugiat animi blanditiis nisi reprehenderit qui assumenda quae, excepturi dolores voluptatibus, illum et praesentium odio quos dicta aspernatur laborum sint. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam facilis deleniti cum reiciendis atque exercitationem sed ratione temporibus cumque? Modi fuga distinctio repellendus necessitatibus reprehenderit earum, deserunt ad voluptates. </p>
<a href="https://www.niemvuilaptrinh.com/" class="btn-1 btn-duong-dan">Truy Cập Trang</a>
</div>
</div>
</div>
</section>
</div>
Và kết quả bạn xem hình ảnh dưới đây nhé:
Ở đây có một lưu ý là nếu bạn muốn tạo hình ảnh để hiển thị trang web trên nhiều màn hình thiết bị giống như mình thì có thể sử dụng phần mềm Smartmockups nhé!
Thiết Lập Style Cho Nội Dung Header
Trong phần này chúng ta sẽ đi vào thiết lập font chữ, khoảng cách, màu sắc chữ... cho nội dung trang web bằng đoạn code CSS sau nhé:
CSS
body{
color: #74727a;
font-size: 18px;
line-height: 34px;
overflow-x: hidden;
}
a:hover{
text-decoration: none;
}
.one .container{
padding-top: 150px;
padding-bottom: 130px;
position: relative;
}
.title{
margin: 0;
color: #483D8B;
font-weight: 400;
font-size: 90px;
line-height: 1em;
}
.text{
margin:0;
font-size:20px;
line-height: 36px;
color: #74727a;
margin-top: 25px;
margin-bottom: 40px;
}
Và kết quả bạn xem ở hình ảnh bên dưới nhé:
Thiết Lập Style Cho Phần Hình Ảnh
Trong phần này chúng ta sẽ đi vào điều chỉnh vị trí hình ảnh thông qua thuộc tính position trong CSS bằng đoạn mã sau nhé:
CSS
.hinh-anh{
position: absolute;
bottom: 9%;
right: -20px;
}
.hinh-anh img{
position: relative;
margin-top: 280px;
margin-left: -30px;
animation: hieu-ung-hinh-anh 5s ease-in-out 0s infinite alternate;
}
Kết quả bạn xem hình dưới đây nha:
Thiết Lập Các Shape Background Cho Header
Bây giờ chúng ta sẽ đi vào tạo các shape hình tròn background cho header thông qua đoạn mã CSS sau nhé:
[class*=shape-]{
position: absolute;
border-radius: 50%;
animation: bubble;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.shape-1{
background-image: linear-gradient(40deg, #0db8ff 0%, #f332ff 100%);
width: 150px;
height: 150px;
top: 5%;
left: 3%;
animation-duration: 8s;
perspective: 150px;
}
.shape-2{
background-image: linear-gradient(40deg, #39aeff 0%, #3cff53 100%);
width: 85px;
height: 85px;
top: 20%;
left: 38%;
animation-duration: 10s;
perspective: 150px;
}
.shape-3{
background-image: linear-gradient(40deg, #ff43c0 0%, #ffa95c 100%);
width: 150px;
height: 150px;
bottom: 12%;
left: 6%;
animation-duration: 7s;
perspective: 150px;
}
.shape-4{
background-image: linear-gradient(40deg, #ff703e 0%, #ffec4e 100%);
width: 85px;
height: 85px;
top: 20%;
right : 4%;
animation-duration: 12s;
perspective: 85px;
}
Ở đây mình có lưu ý nhỏ là cách query [class*=shape-] có nhiệm vụ giúp chúng ta có thể lấy ra tất cả các thẻ có class chứa giá trị shape-. Nếu bạn muốn tìm hiểu thêm thì có thể truy cập ở đây nhé!
Bây giờ chúng ta sẽ xem kết quả của đoạn mã trên thông qua hình ảnh dưới nha:
Tạo Hiệu Ứng Chuyển Động Cho Shape Background
Tiếp theo chúng ta sẽ đi vào tạo hiệu ứng chuyển động cho các shape background hình tròn thông qua thuộc tính @keyframes CSS. Để hiểu rõ hơn bạn xem đoạn mã sau nhé:
CSS
@keyframes bubble{
0%{
transform: translateY(0px) translateX(0) rotate(0);
}
30%{
transform: translateY(30px) translateX(50px) rotate(15deg);
}
50%{
transform: translateY(50px) translateX(100px) rotate(45deg);
}
80%{
transform: translateY(30px) translateX(50px) rotate(15deg);
}
100%{
transform: translateY(0px) translateY(0) rotate(0);
transform-origin: center center;
}
}
Và kết quả bạn xem video sau nhé:
Thiết Lập Style Cho Button
Trong phần cuối cùng này chúng ta sẽ đi vào thiết lập style cho button bằng đoạn mã sau nhé:
CSS
.btn-1{
padding: 18px 55px;
}
.btn-duong-dan{
border: none;
display: inline-block;
vertical-align: middle;
outline: none;
font-size: 16px;
font-weight: 400;
color: #fff;
border-radius:5px;
padding: 14px 41px;
background-image: linear-gradient(90deg, #56CCF2 0%, #2F80ED 100%);
position: relative;
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 hình ảnh bên dưới nhé:
Nếu bạn muốn xem dự án trên Codepen thì hãy truy cấp đường dẫn bên dưới nhé!
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 background animation header hữu íchdà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ẻ!