Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Hiệu Ứng Fullscreen Slider

Tạo Hiệu Ứng Fullscreen Slider


Ngày 17 Tháng 2 Năm 2020

Tạo Hiệu Ứng Fullscreen Slider

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu cách tạo hiệu ứng fullscreen slider để chúng ta có thể ôn lại kiến thức cũng như bổ sung thêm vào bộ sưu tập hiệu ứng HTML, CSS. Để hiểu rõ hơn các bạn cùng mình tìm hiểu nhé!

Hiệu Ứng Fullscreen Slider

Trước tiên hãy xem hiệu ứng sau khi được hoàn thành đã nhé. Để các bạn có hình dung rồi sau đó mình mới đi vào chi tiết tạo hiệu ứng này:

Sau khi đã xem xong chúng ta hãy đi vào bước thứ nhất là tạo một thư mục có cấu trúc file như sau nhé:

Cấu trúc Thư Mục FullScreen_Slider

Sau khi đã tạo xong cấu trúc thư mục thì bước tiếp theo là các bạn tải một tập tin mà mình đã chứa sẵn các file đã được nén để ở đường dẫn bên dưới giúp các bạn không cần phải mất thời gian để tạo các file HTML, CSS và hình ảnh.
Tải File Fullscreen_slider

Bây giờ mình sẽ tạo cấu trúc file HTML cho trang_chinh.html sau đó liên kết nó với file style.css để dễ hiệu chỉnh. Các bạn lưu ý là đường dẫn style.css lúc nào cũng nằm dưới cùng trong thẻ <head> của một trang HTML bởi vì khi ta chỉnh sửa CSS thì nó sẽ không bị ảnh hưởng bởi các file CSS khác. Để nắm rõ hơn các bạn theo dõi đoạn code dưới đây nhé:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hiệu ứng Fullscreen Slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Tiếp theo chúng ta sẽ thêm các thẻ HTML cần thiết trong thẻ <body> cho trang_chinh.html để tạo hiệu ứng fullscreen slider và đồng thời giúp các bạn có thể nắm được sườn của trang HTML để thuận tiện cho việc tinh chỉnh CSS ở các bước sau.Một lưu ý nhỏ là các bạn có thể tạo ra các văn bản tự động mà không cần phải đánh chữ mất thời gian của các bạn ở trang web: Lipsum. Để dễ hình dung cùng xem đoạn code dưới đây với mình nhé:

<section>
<div class="trang">
    <div class="noi_dung">
        <h2>Trang 1</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing 
elit. Fugit, atque accusantium? Ipsam, sint odit numquam deleniti 
necessitatibus impedit tempore aut sed illum nam adipisci 
exercitationem minima! Consectetur porro sit id!</p>
    </div>
</div>
<div class="trang">
    <div class="noi_dung">
        <h2>Trang 2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing 
elit. Fugit, atque accusantium? Ipsam, sint odit numquam deleniti 
necessitatibus impedit tempore aut sed illum nam adipisci 
exercitationem minima! Consectetur porro sit id!</p>
    </div>
</div>
<div class="trang">
    <div class="noi_dung">
        <h2>Trang 3</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, atque accusantium? Ipsam, sint odit numquam deleniti necessitatibus impedit tempore aut sed illum nam adipisci exercitationem minima! Consectetur porro sit id!</p>
    </div>
</div>
<div class="trang">
    <div class="noi_dung">
        <h2>Trang 4</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing 
elit. Fugit, atque accusantium? Ipsam, sint odit numquam deleniti 
necessitatibus impedit tempore aut sed illum nam adipisci 
exercitationem minima! Consectetur porro sit id!</p>
    </div>
</div>
<div class="trang">
    <div class="noi_dung">
        <h2>Trang 5</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing 
elit. Fugit, atque accusantium? Ipsam, sint odit numquam deleniti 
necessitatibus impedit tempore aut sed illum nam adipisci 
exercitationem minima! Consectetur porro sit id!</p>
    </div>
</div>
</section>

Và chúng mình cùng xem kết quả nhé:

Ảnh Hiệu ứng fullscreen slider phiên bản HTML

Bây giờ chúng ta sẽ chỉnh CSS cho thẻ <body><section>. Ở đây mình có lưu ý nhỏ về flexbox, nó là một kiểu dàn trang (layout mode) mà nó sẽ tự cân đối kích thước của các phần tử bên trong để hiển thị trên mọi thiết bị. Các bạn có thể tham khảo và tìm hiểu thêm thuộc tính này ở trang anh Thạch Phạm Tham Khảo. Để nắm rõ hơn cùng mình xem đoạn code dưới đây nhé:

body {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
section {
    position: absolute;
    width: 100%;
    height:100vh;
    display:flex;
    border: 2px solid #000;
}

Và đây là kết quả của đoạn code trên:

Ảnh Hiệu ứng fullscreen slider phiên bản HTML

Tiếp theo các bạn chỉnh sửa CSS như màu nền, vị trí, đường viền... cho thẻ <div class="trang">. Lưu ý nhỏ là thuộc tính flex: 1; nó sẽ giúp chúng ta hiển thị những thẻ <div class="trang"> luôn bằng nhau trên mọi thiết bị. Để hiểu rõ hơn các bạn có thể tham khảo ở w3school: Tham Khảo. Bây giờ để dễ hình dung các bạn xem đoạn code sau nhé:

section .trang {
    position: relative;
    background:#0f0;
    flex: 1;
    border-right: 2px solid #000;
    overflow: hidden;
    transition: 0.5s ease-in-out;
}
section .trang:last-child{
    border-right:none;
}

Và đây là kết quả của đoạn code trên:

Ảnh Hiệu ứng fullscreen slider phiên bản HTML

Tiếp Theo chúng ta sẽ tạo hiệu ứng nho nhỏ là người dùng khi hover vào thẻ <div class="trang"> thì nó sẽ được tăng độ rộng. Đây là một phần quan trọng trong hiệu ứng fullscreen slider. Để nắm rõ hơn các bạn xem đoạn code sau nhé:

section .trang:hover {
flex-grow: 5;
}

Và các bạn xem kết quả dưới đây nhé:

Bước tiếp theo la chúng ta cần chỉnh CSS như màu nền, vị trí, độ mờ, màu sắc... cho thẻ <div class="noi_dung">. Sau đó ta sẽ ẩn thẻ <div class="noi_dung"> để tạo hiệu ứng khi người dùng hover vào thẻ <div class="trang"> thì nội dung sẽ hiển thị trở lại với thuộc tính visibility: visible;. Để nắm rõ hơn các bạn xem đoạn code sau nhé:

section .trang .noi_dung{
    position: absolute;
    bottom:0;
    margin: 40px;
    padding: 30px;
    background:#000;
    border-radius: 20px;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    color: #fff;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
    transform: translateY(100px);
}
section .trang:hover .noi_dung {
    visibility: visible;
    opacity: 0.8;
    transition: 0.5s;
    transition-delay: 0.5s;
    transform: translateY(0);
}

Và các bạn xem kết quả dưới đây nhé:

Bước cuối cùng là chúng ta cần thêm ảnh nền cho từng thẻ <div class="trang"> bằng cách gọi section .trang:nth-child(Vị Trí Của Đối tượng). Để dễ hình dung các bạn xem đoạn code sau đây nhé:

section .trang:nth-child(1) {
    background: url(hinh_1.jpg);
    background-position:  center center;
}
section .trang:nth-child(2) {
    background: url(hinh_2.jpg);
    background-position: center center;
}
section .trang:nth-child(3) {
    background: url(hinh_3.jpg);
    background-position: center center;
}
section .trang:nth-child(4) {
    background: url(hinh_4.jpg);
    background-position: center center;
}
section .trang:nth-child(5) {
    background: url(hinh_5.jpg);
    background-position: center center;
}

Kết quả cuối cùng của chúng ta là:

Mình cũng gửi các bạn đường dẫn để tải về những file trong thư mục Fullscreen_Slider để bạn đễ hình dung và có thể xem lại!
Đường dẫn tải File Source Code

Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
Đường dẫn để bạn tìm hiểu thêm

Tổng kết:

Qua đây mình mong bài viết sẽ giúp các bạn ôn lại kiến thức, vận dụng hiệu quả trong thực tiễn và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!