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>

Ở đâ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;
    }

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);

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);
    }

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;

• Transition cho popup__content

transition: all .4s .2s;

---

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;
        }

---

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);
    }

    

}

---

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ó".

---

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.