Code hoàn thiện hiệu ứng cho pop up component

Dẫn nhập

Ở bài trước chúng ta đã cùng nhau code xong phần GIAO DIỆN POPUP COMPONENT.

Trong bài này chúng ta sẽ cùng nhau code tiếp phần Hiệu ứng trong popup component.

Nội dung

Để tiếp thu tốt bài này, các bạn cần:

Để tiếp thu tốt bài học này các bạn cần:

• Có kiến thức cơ bản về CSS và SASS
• Đã xem qua các bài trước trong khóa LẬP TRÌNH CSS & SASS NÂNG CAO VỚI DỰ ÁN WEBSITE LANDING PAGE
• Đã hoàn thiện bài  GIAO DIỆN POPUP COMPONENT.

Trong bài này chúng ta sẽ cùng nhau:

• Code hiệu ứng mở popup.
• Code hiệu ứng đóng popup.

Code hiệu ứng mở popup

Trước hết ta để .popup có opacity là 0 nhưng thế thì chưa đủ vì nó thực chất vẫn đang đè lên các element còn lại, ta để thêm visibility là hidden.

Và để click mở button phần course section mà mở được popup trước hết ta để id của popup là popup, Ở thẻ a chứa link trong phần course-section ta để href=”#popup” nó sẽ link đến element có class là popup

 <a href="#popup" class="btn btn--white">Enroll now</a>
1

Ở đây ta sử dụng 1 pseudo class đó chình là :target, tức la khi element được link (khi user click vào button có href link đến element và ở đây chính là popup)

Khi được link thì popup sẽ có opacity trở lại là 1 và visibility trở lại là visible

 &:target{
        opacity: 1;
        visibility: visible;
    }
1
2
3
4
5

Ta chú ý thêm 1 phần nữa là khi click thì phần content dần dần phóng to lên chứ nó không hiện ra ngay.

Nên ban đầu ta để &__content cũng có opacity là 0 và transform có ví trí ở dưới và nhỏ 1 chút

opacity: 0;
transform: translate(-50%, -50%) scale(.5);
1
2
3

Và khi click thì opacity sẽ là 1 và trở lại vị trí chính giữa với scale là 1 

  &:target &__content{
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
1
2
3
4
5

Và chúng ta sẽ để transition cho chúng và nhớ để hiệu ứng của content sẽ trễ hơn popup 1 chút để chúng ta có thể quan sát quá trình phóng to của phần content.

• Transition cho popup

transition: all .5s;
1

• Transition cho popup__content

transition: all .4s .2s;
1

Code hiệu ứng đóng popup

Thực ra hiệu ứng close rất đơn gian, chúng ta chỉ cần link href của button close vào id của course section #section-courses là được, mỗi khi click thì website sẽ hiểu và thay thế target là #section-courses, khi không được link nữa thì popup sẽ trở lại trạng thái ban đầu là opacity :0 và visibility: hidden.

Chúng ta code 1 chút hiệu ứng khi hover close button

&:hover{
            color: $color-primary;
        }
1
2
3
4

Code CSS

.popup {
    height: 100vh;
    width: 100%;
    
    top: 0;
    left: 0;
    background-color: rgba($color-black, .8);
    

    opacity: 0;
    visibility: hidden;
    transition: all .5s;

    &__img {
        display: block;
        width: 100%;
    }

    &__content {
        @include absCenter;
        width: 75%;
        background-color: $color-white;
        border-radius: 3rem;
        display: table;
        overflow: hidden;

        opacity: 0;
        transform: translate(-50%, -50%) scale(.5);
        transition: all .4s .2s;
    }

    &__left {
        width: 33.333333%;
        display: table-cell;
    }

    &__right {
        width: 66.666667%;
        display: table-cell;
        vertical-align: middle;
        padding: 3rem 5rem;
    }

    &__text {
        font-size: 1.4rem;
        margin-bottom: 4rem;

        column-count: 2;
        column-gap: 4rem;
        column-rule: 1px solid $color-grey;

        hyphens: auto;
    }

    &__close {

        &:link,
        &:visited {
            color: $color-grey-dark-1;
            
            top: 2.5rem;
            right: 2.5rem;
            font-size: 3rem;
            text-decoration: none;
        }

        &:hover{
            color: $color-primary;
        }
    }

    &:target{
        opacity: 1;
        visibility: visible;
    }

    &:target &__content{
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

Kết luận

Trong bài này chúng ta đã cùng nhau kết thức quá trình code popup component.

Ở bài sau chúng ta sẽ code phần cuối cùng cho project là NAVIGATION rồi sẽ bắt tay code responsive cho website.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: "Luyện tập – Thử thách – Không ngại khó".

---

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Code hoàn thiện hiệu ứng cho pop up component dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Project

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK