Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Slideshow Bằng  HTML CSS

Tạo Slideshow Bằng HTML CSS


Ngày 1 Tháng 12 Năm 2020

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo slideshow bằng HTML CSS cho trang web nhé!

Tạo Cấu Trúc Cho Slidehow

Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với Google Font thông qua đoạn mã dưới đây nhé:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tạo Slideshow Cho Trang Web</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto:[email protected];500&display=swap" rel="stylesheet">
</head>
<body>
</body>
</html>

Thêm Các Phần Tử Cần Thiết

Trong phần này chúng ta sẽ thêm các phần tử HTML cần thiết để tạo slideshow cho trang web thông qua đoạn mã dưới đây nhé:

HTML

<div class="slideshow">
    <div class="slideshow-item">
        <img src="https://images.pexels.com/photos/572741/pexels-photo-572741.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
        <div class="slideshow-item-text">
            <h5>Vietnam</h5>
            <p>Lorem ipsum dolor sit amet consectetur...</p>
            <button>Tìm Hiểu Thêm</button>
        </div>
    </div>
    <div class="slideshow-item">
        <img src="https://images.pexels.com/photos/402028/pexels-photo-402028.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
        <div class="slideshow-item-text">
            <h5>Japan</h5>
            <p>Lorem ipsum dolor sit amet consectetur...</p>
            <button>Tìm Hiểu Thêm</button>
        </div>
    </div>
    <div class="slideshow-item">
        <img src="https://images.pexels.com/photos/415708/pexels-photo-415708.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
        <div class="slideshow-item-text">
            <h5>Thailand</h5>
            <p>Lorem ipsum dolor sit amet consectetur...</p>
            <button>Tìm Hiểu Thêm</button>
        </div>
    </div>
</div>

Và kết quả bạn xem video bên dưới nhé:

Thiết Lập Style Cho Trang Web

Trong phần này chúng ta sẽ đi vào thiết lập style cho các trang trong slideshow như là vị trí, kích thước, font chữ... bằng các thuộc tính CSS ở đoạn mã dưới đây nha:

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #000;
    font-family: 'Roboto', sans-serif;
}
.slideshow{
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.slideshow-item{
    width: inherit;
    height: inherit;
    position: absolute;
     }
.slideshow-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: zoom 16s infinite;
}
.slideshow-item-text{
    max-width: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    padding: 10rem 5rem;
    box-shadow: 0 1px 1px rgba(0,0,0,0.12),
              0 2px 2px rgba(0,0,0,0.12),
              0 4px 4px rgba(0,0,0,0.12),
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
    border-radius:0px 20px 20px 0px;
}

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

Slideshow 1

Thiết Lập Nội Dung Cho Slideshow

Phần tiếp theo chúng ta sẽ đi vào thiết lập CSS cho nội dung của từng trang trên slideshow thông qua đoạn mã dưới đây nhé:

CSS

.slideshow-item-text h5 {
    font-size: 5rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 2.5rem;
    font-family: 'Montserrat', sans-serif;
}
.slideshow-item-text p {
    font-size: 1.2rem;
    letter-spacing: 1px;
}
button{
    position: absolute;
    right: 5%;
    width: 180px;
    height: 45px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: #fff;
    background-color: DodgerBlue;
    border: none;
    border-radius: 45px;
    box-shadow:  0 1px 1px rgba(0,0,0,0.25),
    0 2px 2px rgba(0,0,0,0.20),
      0 4px 4px rgba(0,0,0,0.15),
    0 8px 8px rgba(0,0,0,0.10),
    0 16px 16px rgba(0,0,0,0.05);
    cursor: pointer;
}

Kết quả đoạn mã trên bạn xem hình bên dưới nhé:

Slideshow 2

Kích Hoạt Hiệu Ứng Animation Cho Slideshow

Trong phần này chúng ta sẽ đi vào tạo hiệu ứng chuyển trang cho slide show thông qua đoạn mã bên dưới nhé:

CSS

.slideshow-item {
    opacity: 0;
    animation: hieu_ung_slideshow 16s infinite;
}
.slideshow-item:nth-child(1),
.slideshow-item:nth-child(1) img{
    animation-delay: 0s;
}
.slideshow-item:nth-child(2),
.slideshow-item:nth-child(2) img{
    animation-delay: 5s;
}
.slideshow-item:nth-child(3),
.slideshow-item:nth-child(3) img{
    animation-delay: 10s;
}
@keyframes hieu_ung_slideshow{
    25%{
        opacity: 1;
    }
    40%{
        opacity: 0;
    }
}
@keyframes zoom {
    100%{
        transform: scale(1.5);
    }
}

Và kết quả hiệu ứng chuyển động slideshow bạn xem bên dưới nha:

Thiết Lập Responsive Cho Slideshow

Trong phần cuối cùng chúng ta sẽ đi vào thiết lập hiển thị slideshow responsive trên nhiều màn hình điện thoại bằng đoạn mã dưới đây nhé:

@media screen and (max-width: 1000px){
    .slideshow-item-text{
        max-width: 70%;
        padding: 5rem 1rem;
    }
    .slideshow-item-text h5 {
        font-size: 3rem;
             }
}
@media screen and (max-width: 768px){
    .slideshow-item-text{
        max-width: 100%;
        padding: 2rem;
        top: initial;
        bottom:0;
        transform: initial;
        border-radius:none;
    }
    .slideshow-item-text h5 {
        font-size: 2rem;
             }
    button{
        display: block;
        position: relative;
        margin-top: 1rem;
        margin-left: 2rem;
    }
}

Kết quả slideshow đáp ứng bạn xem video bên dưới nhé:

Bên dưới là đường dẫn dự án trên Codepen nhé!

Nguồn Codepen

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức tạo slideshow hữu ích việc phát triển, thiết kế web 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ẻ!