Hướng dẫn ảnh chuyển động css

Question

Một trong các kỹ thuật phổ biến ở các website hiện đại là có các hiệu ứng chuyển động cho từng đối tượng rất đẹp mắt được làm hoàn toàn bằng CSS3, khi mà trước đây đa phần các hiệu ứng chuyển động phải cần có sự trợ giúp của Javascript. Trong CSS3 có thuộc tính transition giúp bạn tạo ra các hiệu ứng chuyển động của một đối tượng tron website dễ dàng mà không cần phải dùng thêm Javascript.

Nội dung chính Show

Tạo Cấu Trúc Phần Tử HTML
Thiết Lập Vị Trí Phần Tử Bằng CSS
Thiết Lập Chuyển Động Reveal Cho Hình Ảnh
Thêm Nội Dung Và Hiệu Ứng Reveal Animation Cho Tiêu Đề
Pure CSS Text Reveal
GSAP text reveal animation
Page Reveal Effect
CSS Text Reveal
CSS Reveal animation text and image
CSS Reveal Slider
Line reveal block
Hover Reveal Effect
Scroll reveal
Smooth Scroll Reveal - GSAP
Cross Color Text Reveal
Tổng kết:

Cấu trúc khai báo transition như sau:

transition: [thuộc tính chuyển động] [thời gian chuyển động] [thời gian delay] [kiểu chuyển động];

Lưu ý rằng transition là thuộc tính CSS3 nên bạn cần nên khai báo thêm hai thuộc tính tương tự kèm hai tiền tố -moz- và -webkit- để nó hoạt động tốt trên mọi trình duyệt. Ví dụ:



#box {

  transition: margin-left 2s 0.5s ease-in-out;

  -moz-transition: margin-left 2s 0.5s ease-in-out;

  -webkit-transition: margin-left 2s 0.5s ease-in-out;

}

Trong đó, margin-left là thuộc tính mà bạn cần nó sẽ kích hoạt chuyển động nhưng không phải thuộc tính nào cũng có thể chuyển động mà nó chỉ có tác dụng với các hiệu ứng trong danh sách này, bạn có thể sửa thành all để nó áp dụng lên toàn bộ thuộc tính,



#box {

  transition: margin-left 2s 0.5s ease-in-out;

  -moz-transition: margin-left 2s 0.5s ease-in-out;

  -webkit-transition: margin-left 2s 0.5s ease-in-out;

}

0 là thời gian diễn ra sự chuyển động và



#box {

  transition: margin-left 2s 0.5s ease-in-out;

  -moz-transition: margin-left 2s 0.5s ease-in-out;

  -webkit-transition: margin-left 2s 0.5s ease-in-out;

}

1 là thời gian trễ khi sự kiện bắt đầu,



#box {

  transition: margin-left 2s 0.5s ease-in-out;

  -moz-transition: margin-left 2s 0.5s ease-in-out;

  -webkit-transition: margin-left 2s 0.5s ease-in-out;

}

2 là kiểu chuyển động nhanh ở lúc bắt đầu và chậm ở lúc kết thúc. Phần kiểu chuyển động bạn có thể không cần khai báo, hãy xem thêm các kiểu chuyển động tại đây.

Bây giờ bạn đã khai báo cho



#box {

  transition: margin-left 2s 0.5s ease-in-out;

  -moz-transition: margin-left 2s 0.5s ease-in-out;

  -webkit-transition: margin-left 2s 0.5s ease-in-out;

}

3 áp dụng hiệu ứng chuyển động rồi, nhưng để vậy nó sẽ không chuyển động mà sẽ bắt buộc có thêm một sự kiện xảy ra để nó kích hoạt. Ví dụ mình sẽ viết thêm CSS với pseudo-class là



#box {

  transition: margin-left 2s 0.5s ease-in-out;

  -moz-transition: margin-left 2s 0.5s ease-in-out;

  -webkit-transition: margin-left 2s 0.5s ease-in-out;

}

4 để tiến hành sửa giá trị



#box {

  transition: margin-left 2s 0.5s ease-in-out;

  -moz-transition: margin-left 2s 0.5s ease-in-out;

  -webkit-transition: margin-left 2s 0.5s ease-in-out;

}

5 và lúc này nó sẽ chuyển động dựa theo giá trị mới.

#box:hover {

  margin-left: 150px;

}

Bạn xem ví dụ live ở dưới.

[codepen id=”PwMjLK”]

Tóm lại khi tạo hiệu ứng chuyển động là bạn phải đặt thuộc tính transition vào phần tử muốn làm chuyển động, và nhớ khai báo thuộc tính chuyển động. Sau đó bạn phải thiết lập thêm sự kiện chuyển động thông qua các pseudo class hoặc thậm chí là Javascript nếu bạn biết ngôn ngữ này.

Ngoài ra, bạn còn có thể thiết lập chuyển động cho nhiều thuộc tính khác nhau bằng cách thêm dấu phẩy như dưới đây.



#box {

  transition: margin-left 2s, background-color 1s;

  -moz-transition: margin-left 2s, background-color 1s;

  -webkit-transition: margin-left 2s, background-color 1s;

}

Ví dụ thực tế:

[codepen id=”yymoLZ”]

Đơn giản phải không nào? Hy vọng là với kiến thức về transition thì bạn sẽ cảm thấy mình làm được nhiều điều thú vị hơn với CSS và thực tế còn rất nhiều cái thú vị nữa mà mình sẽ tiếp tục hướng dẫn ở các bài sau.

Nếu bạn thấy trang này nghĩa là tên miền đang được trỏ về địa chỉ IP của máy chủ Hosting tại AZDIGI, nhưng website chưa thể hoạt động do không tồn tại gói dịch vụ hoặc chưa thêm vào host.

Hoặc nếu bạn vừa mới trỏ tên miền thì có thể thực hiện xóa cookie/cache trình duyệt và thử lại sau ít phút

.

Nếu bạn cho rằng đây là lỗi, hãy liên hệ với bộ phận Hỗ trợ kỹ thuật của AZDIGI tại đây

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é:

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.

Nguồn

GSAP text reveal animation

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

Nguồn

Page Reveal Effect

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

Nguồn

CSS Text Reveal

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

Nguồn

CSS Reveal animation text and image

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

Nguồn

CSS Reveal Slider

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

Nguồn

Line reveal block

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

Nguồn

Hover Reveal Effect

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

Nguồn

Scroll reveal

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

Nguồn

Smooth Scroll Reveal - GSAP

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

Nguồn

Cross Color Text Reveal

See the Pen Cross Color Text Reveal by Kenny (@ispykenny) 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 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ẻ!

programming css