Bài 8: Một số hiệu ứng với hộp thoại Modal

0

Trong bài này, mình sẽ hướng dẫn cách tạo một số hiệu ứng với hộp thoại modal. Chúng ta sẽ làm các hiệu ứng phóng to, xoay theo chiều dọc, xoay ngang, hiệu ứng newspaper …

Video – Một số hiệu ứng với hộp thoại Modal

Ý tưởng

Cách tạo hộp thoại cũng như cách xử lý animation cho hộp thoại mình đã hướng dẫn nhiều lần trong bài 6 bài 7. Các bạn có thể xem lại 2 bài trên.

Nhìn chung cách làm đi theo trình tự là bắt sự kiện click. Sau đó thêm class vào hộp thoại và nền. Xử lý animation và hiệu ứng ở trong class bằng css.

Hướng dẫn thực hiện

Phần HTML và JS bạn xem trong code mẫu bên dưới nhé. Mình chỉ đưa code css tiêu biểu cho các hiệu ứng.

Hiệu ứng xoay theo chiều dọc – Flip horizontal

Có thể chỉnh tâm quay bằng thuộc tính transform-origin nhé.

.dialog-2{
   /*tâm quay*/
   /*transform-origin: 0% 100%; */
   ransform: rotateY(90deg);
}
.dialog-2.show{
   opacity: 1;
   visibility: visible;
   transform: rotateY(0deg);
}

Hiệu ứng xoay theo chiều dọc – Flip vertical

.dialog-3{
   /*tâm quay*/
   /*transform-origin: 100% 0% ; */
   transform: rotateX(-90deg);
}
.dialog-3.show{
   opacity: 1;
   visibility: visible;
   transform: rotateX(0deg);
}

Hiệu ứng phóng to – scale

.dialog-4{
   /*tâm quay*/
   /*transform-origin: 100% 0% ; */
   transform: scale(0.1);
}
.dialog-4.show{
   opacity: 1;
   visibility: visible;
   transform: scale(1);
}

Hiệu ứng newspaper

.dialog-6{
   transform: scale(0) translateX(500px) translateX(500px) rotate(720deg);
   transition: 0.8s;
}
.dialog-6.show{
   opacity: 1;
   visibility: visible;
   transition: 0.8s;
   transform: scale(1) translateX(0) translateX(0) rotate(0deg);
}

Bạn nào chưa biết về modal thì xem bài 6 và bài 7 như mình nói ở trên nhé.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.