Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Hiệu Ứng Chuyển Động Reveal Bằng HTML CSS

Tạo Hiệu Ứng Chuyển Động Reveal Bằng HTML CSS


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

Tạo Hiệu Ứng Chuyển Động Reveal Bằng HTML CSS

Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu cách tạo hiệu ứng chuyển động reveal bằng HTML, CSS cho phần tử trong trang web 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>Hiệu Ứng Chuyển Động Reveal Animation</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="noi_dung">
            <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1600654731/hieu_ung_reveal_animation/hinh_anh_1_foheq0.jpg" alt="Hình Ảnh Minh Họa 1">
        </div>
    </div>
</body>
</html>

Ở trên thì mình có sử dụng thêm Font Roboto trong Google Font nữa nha.

Thiết Lập Vị Trí Phần Tử Bằng CSS

Bước tiếp theo chúng ta sẽ đi vào thiết lập vị trí của phần tử trong thẻ body thông qua đoạn mã sau nhé:

CSS

body{
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.container{
    position: relative;
}

Và kết quả của đoạn mã trên bạn xem phía bên dưới nhé:

Hiệu Ứng Reveal Animation 1

Thiết Lập Chuyển Động Reveal Cho Hình Ảnh

Trong phần này chúng ta sẽ sử dụng các thuộc tính CSS để thiết lập hiệu ứng chuyển động reveal cho hình ảnh thông qua đoạn mã dưới đây nhé:

CSS

.container .noi_dung img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.container .noi_dung::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1;
    animation: reveal 1s reverse forwards;
    animation-delay: 3s;
    transform-origin: right;
}
@keyframes reveal{
    0%{
        transform: scaleX(0);
    }
    100%{
        transform: scaleX(1);
    }
}

Và kết quả đoạn mã CSS bạn xem ở dưới đây nhé:

Bạn nhớ tải lại trang để có thể thấy hiệu ứng chuyển động reveal nhé!

Thêm Nội Dung Và Hiệu Ứng Reveal Animation Cho Tiêu Đề

Phần cuối cùng này chúng ta sẽ đi vào thêm nội dung cũng như tạo hiệu ứng chuyển động reveal cho tiêu đề của hình ảnh thông qua đoạn mã sau nhé:

HTML

<div class="container">
  <div class="noi_dung">
    <img src="https://images.pexels.com/photos/1170642/pexels-photo-1170642.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=640&w=480" alt="Hình Ảnh Minh Họa 1">
   <!--Thêm Tiêu Đề Cho Hình Ảnh-->
    <h2>
      Hiệu Ứng Chuyển Động Reveal Animation
    </h2>
  </div>
</div>

CSS

.container .noi_dung h2{
    position: absolute;
    right: -100px;
    bottom: 50px;
    margin: 0;
    padding: 10px;
    background: #fff;
    z-index: 2;
    box-shadow: 0 10px 15px rgba(0,0,0,0.2);
    transform: scaleX(0);
    transform-origin: left;
    animation: reveal 1s ease-in-out forwards;
    animation-delay: 1s;
}
.container .noi_dung h2::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1;
    animation: reveal 1s reverse forwards;
    animation-delay: 2s;
    transform-origin: right;
}

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

Nếu bạn muốn xem trên Codepen thì có thể tham khảo ở bên dưới nhé:

See the Pen Hiệu Ứng Reveal Animation by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bạn nên chuyển sang chế độ screen 0.5x để thấy rõ hơn 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 hiệu ứng chuyển động reveal 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ẻ!

Load WooCommerce Stores in 249ms!