Tạo hiệu ứng hover image và set video background cho testimonials section

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 14:11 05-10-2019 545 lượt xem 0 bình luận
Học nhanh

Danh sách bài học

Tạo hiệu ứng hover image và set video background cho testimonials section

Dẫn nhập

Ở bài trước chúng ta đã cùng nhau BẮT ĐẦU CODE PHẦN TESTIMONIAL COMPONENT.

Trong bài hôm nay chúng ta sẽ hoàn thiện nốt Hiệu ứng hover image và set video background.


Nội dung

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

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

  • Hiệu ứng hover image
  • Set video background

Hiệu ứng hover image

Khi hover caption từ dưới hiện lên nên ta sử dụng pseudo-class :hover với opacity và vị trí của caption là được.

// components/_testimonials.scss
&:hover &__caption{
        opacity: 1;
        transform: translate(-50%,-50%);

    }

Đối với &__img ta thấy là bức ảnh bị tối đi, và bị làm nhòe cũng như phóng ta ra 1 chút xíu

Ở đây ta sử 1 property của CSS đó là filter (là property dùng chỉnh đồ mờ, sáng hoặc màu sắc cho các element)

&:hover &__img{
        transform: scale(1.05);
        filter: blur(.5rem) brightness(70%);
    }

Ở đây ta sử dụng 2 thuộc tính là blur (độ mờ), brightness (độ sáng)

Bây giờ ta chỉ cần set thêm transition cho hiệu ứng thêm mượt mà nữa là được.

    &__img{
        transition: all .3s; 
    }

    &__caption{
        transition: all .5s;
    }

Set video background

Trước hết chúng ta sẽ quay lại file html để chèn video làm background

Ở đây mình sẽ giới thiệu cho các bạn 1 cặp thẻ mới trong html đó chính là thẻ video

<section class="section-testimonials">
            <!--add this--><div class="bg-video">
                <!--add this--><video class="bg-video__content" autoplay muted loop>
                <!--add this-->    <source src="img/Boulevard.mp4" type="video/mp4">
                <!--add this-->    <source src="img/Boulevard.webm" type="video/webm">
                <!--add this-->   Your browser is not supported
                <!--add this--></video>
            <!--add this--></div>
            <div class="u-center-text u-margin-bottom-big">
                <h2 class="heading-secondary">
                    testimonials
                </h2>
            </div>
            <div class="row">
                <div class="testimonial">
                    <figure class="testimonial__shape">
                        <img src="./img/person1.jpg" class="testimonial__img" alt="photo1">
                        <figcaption class="testimonial__caption">
                            Lionel Meshi
                        </figcaption>
                    </figure>
                    <div class="testimonial__text">
                        <h3 class="heading-tertiary u-margin-bottom-small">
                            thank for your guide
                        </h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Incidunt repellat tenetur officia quis quasi,
                            temporibus neque reiciendis quaerat exercitationem quibusdam?
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Possimus dolorem labore nam?
                        </p>
                    </div>
                </div>
                <div class="testimonial">
                    <figure class="testimonial__shape">
                        <img src="./img/person2.jpg" class="testimonial__img" alt="photo2">
                        <figcaption class="testimonial__caption">
                            Hellarri Cshinson
                        </figcaption>
                    </figure>
                    <div class="testimonial__text">
                        <h3 class="heading-tertiary u-margin-bottom-small">
                            very helpful course
                        </h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Incidunt repellat tenetur officia quis quasi,
                            temporibus neque reiciendis quaerat exercitationem quibusdam?
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Possimus dolorem labore nam?
                        </p>
                    </div>
                </div>
            </div>
            <div class="u-center-text u-margin-top-big u-margin-bottom-big">
                <a href="/redirect?Id=Ok7QNCdcSHCUf3tyR7o94w%3d%3d" class="btn-text">read all the testimonials &rarr;</a>
            </div>
        </section>

Bên trong thẻ video có thẻ source để ghi địa chỉ file video mà chúng ta sẽ sử dụng, có các property trong thẻ video như muted (không phát ra âm thanh), autoplay (sẽ chạy ngay khi load trang web), loop(sẽ chạy video liên tục), text nằm trong thẻ video sẽ hiện ra nếu như source không load được video, ở đây sẽ hiện lên dòng chữ “your browser is not supported” nếu trường hợp đó xảy ra.

Ta đặt tên class chưa video là bg-video và chúng ta sẽ tạo 1 component để code css cho phần background này. Tạo file _bg-video.scss trong folder component import nó vào main.scss

// main.scss
@import './components/bg-video';

Quay lại file _bg-video.scss, chúng ta sẽ để cho position div.bg-video video là absolute, để z-index: -1 để chắc chắn là video nằm dưới tât cả các element còn lại. Tiếp đó là để opacity:0.2;

.bg-video{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: .2;
}

Ta thấy được video bị tràn ra ngoài, chúng ta sẽ sử dụng over-flow: hidden; giờ đây thì video đã không bị tràn nữa nhưng thực sự thì nội dung của video chỉ mới bị che đi thôi nên nó vẫn có scroll bar chiều ngang xuất hiện .

Chúng ta sẽ chỉnh css của .bg-video__content để giải quyết vấn để này. đầu tiên ta sẽ set width hight cho video là 100%

Bạn thấy content của video đã vừa với width của website nên không còn scrollbar theo chiều ngang nữa nhưng video lại chưa ôm hết dược nội dung của section (ở đây video chưa ôm hết được tiêu đề của section)

Ở đây ta dùng 1 thuộc tính nữa của css đó là object-fit, nó sẽ giúp căn chỉnh image hoặc video phù hợp với size của container cho bạn 1 cách dễ dàng

&__content{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

Vậy là ta được video background như mong muốn.


Code CSS

// components/_bg-video.scss
.bg-video{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: .2;
    overflow: hidden;

    &__content{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

Kết luận

Ở bài này chúng ta đã cùng nhau kết thúc code Testimonials section.

Trong bài sau chúng ta sẽ code phần ENROLL SECTION.

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.