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!

Pure CSS Text Reveal

See the Pen Pure CSS Text Reveal by Mattia Astorino (@equinusocio) on CodePen.

GSAP text reveal animation

See the Pen GSAP text reveal animation by Artur Sedlukha (@sedlukha) on CodePen.

Page Reveal Effect

See the Pen Page Reveal Effect by Kevin Levron (@soju22) on CodePen.

CSS Text Reveal

See the Pen CSS Text Reveal by Andrés Sánchez (@andysanchez-dev) on CodePen.

CSS Reveal animation text and image

See the Pen CSS Reveal animation text and image by Anthony Fessy (@antho-fsy) on CodePen.

CSS Reveal Slider

See the Pen CSS Reveal Slider by Adam Kuhn (@cobra_winfrey) on CodePen.

Line reveal block

See the Pen Line reveal block by Ivan Grozdic (@ig_design) on CodePen.

Hover Reveal Effect

See the Pen Hover Reveal Effect by Tiffany Stoik (@tstoik) on CodePen.

Scroll reveal

See the Pen Scroll reveal by Hektor Wallin (@HektorW) on CodePen.

Smooth Scroll Reveal - GSAP

See the Pen Smooth Scroll Reveal - GSAP by Ivan Grozdic (@ig_design) on CodePen.

Cross Color Text Reveal

See the Pen Cross Color Text Reveal by Kenny (@ispykenny) on CodePen.

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ẻ!