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

Lập trình CSS và SASS nâng cao với dự án website Landing Page

0.0 (0 đánh giá)
Tạo bởi Nguyễn Minh Chí Cập nhật lần cuối 15:10 17-11-2019 1.026 lượt xem 0 bình luận
Học nhanh

Danh sách bài học

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:

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 opacity0 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 visibilityhidden.

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="/redirect?Id=Cz7mKkYGdvMTO65T20giCTbzmHP%2fAKbvpHdpUJSy5I8%3d" nó sẽ link đến element có class là popup

 <a href="/redirect?Id=lBvaKH%2bMOEFZQey1MypF%2ftl7PkKf4kGEbJQMV%2f%2bt3mI%3d" 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 0 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 scale1 

  &: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 :0visibility: 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%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba($color-black, .8);
    z-index: 9999;

    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;
            position: absolute;
            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ó".


Tải xuống

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.

Nội dung bài viết

Tác giả/Dịch giả

Khóa học

Lập trình CSS và SASS nâng cao với dự án website Landing Page

Qua khóa FRONT END CƠ BẢN , Kteam đã hướng dẫn các bạn đã có được những kiến thức cơ bản về  HTML và CSS.

Trong combo Front End 2019, chúng ta sẽ cùng nhau tìm hiểu và áp dụng những kiến thức chuyên sâu về CSS. Do kiến thức về CSS trong khóa học khá lớn và chi tiết nên Kteam đã chia làm 2 phần.

  • Phần 1: CSS và SASS Nâng Cao
  • Phần 2: Flexbox và CSS grid layouts

Ở khóa học này chúng ta sẽ cũng nhau tìm hiểu tổng quát về phần 1: CSS và SASS Nâng Cao với dự án Website Landing Page.

Bạn cũng có thể truy cập vào đường link bên dưới để xem bản PRIEVIEW của website landing page Selftaught 2019 mà chúng ta sẽ cùng thực hiện nhé! 

LANDING PAGE WEBSITE SELFTAUGHT 2019

Đánh giá

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
Không có video.