Animation slideshow Html CSS Javascript

The channel is building 2 series: animation series with proejct and animation series for newbies

See more code HTML CSS javascript with Lun Dev.

Hướng dẩn chi tiết

Truy cập youtube Lùn Dev để xem nhiều hơn

Code HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <h1>
            YOUTUBE LÙN DEV <br />
            SERIES CODE DEVELOPER WEB
        </h1>
        <div id="slide">
            <div class="item" style="background-image: url(1.jpg)">
                <div class="content">
                    <div class="from">Dak Lak</div>
                    <div class="name">Núi đá voi DakLak</div>
                    <div class="type">Leo núi</div>
                </div>
            </div>

<div class="item" style="background-image: url(2.jpg)">
                <div class="content">
                    <div class="from">Dak Lak</div>
                    <div class="name">Núi đá voi DakLak</div>
                    <div class="type">Leo núi</div>
                </div>
            </div>

<div class="item" style="background-image: url(3.jpg)">
                <div class="content">
                    <div class="from">Dak Lak</div>
                    <div class="name">Núi đá voi DakLak</div>
                    <div class="type">Leo núi</div>
                </div>
            </div>

<div class="item" style="background-image: url(4.jpg)">
                <div class="content">
                    <div class="from">Dak Lak</div>
                    <div class="name">Núi đá voi DakLak</div>
                    <div class="type">Leo núi</div>
                </div>
            </div>

<div class="item" style="background-image: url(5.jpg)">
                <div class="content">
                    <div class="from">Dak Lak</div>
                    <div class="name">Núi đá voi DakLak</div>
                    <div class="type">Leo núi</div>
                </div>
            </div>

<div class="item" style="background-image: url(6.jpg)">
                <div class="content">
                    <div class="from">Dak Lak</div>
                    <div class="name">Núi đá voi DakLak</div>
                    <div class="type">Leo núi</div>
                </div>
            </div>
        </div>
        <div class="buttons">
            <button id="prev"><i class="fa-solid fa-arrow-left"></i></button>
            <button id="next"><i class="fa-solid fa-arrow-right"></i></button>
        </div>
    </div>
    <script src="script.js"></script>
    
</body>
</html>

Code CSS

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
h1{
    font-family: 'Anton', sans-serif;
}
body{
    background-color:#EAEAEA;
    overflow: hidden;
}
.container{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:1000px;
    height:600px;
    padding:50px;
    background-color: #f5f5f5;
    box-shadow: 0 30px 50px #bdbdbd;
}
#slide{
    width:max-content;
    margin-top:50px;
}
.item{
    width:400px;
    height:280px;
    background-position: 50% 50%;
    display: inline-block;
    transition: 1s;
    background-size: 200%;
    position: absolute;
    z-index: 1;
}
.item:nth-child(1){
    transform: translate(-150%);
    background-position: 0% 50%;
    opacity: 0;
}
.item:nth-child(2){
    transform: translate(-40%);
    background-position: 20% 50%;
}
.item:nth-child(3){
    transform: translate(70%);
    background-position: 50% 50%;
}
.item:nth-child(4){
    transform: translate(180%);
    background-position: 80% 50%;
}
.item:nth-child(n+5){
    transform: translate(290%);
    background-position: 100% 50%;
    opacity: 0;
}
.item .content{
    position: absolute;
    top:100%;
    background-color: #fff;
    width:80%;
    padding:0 10%;
    font-family: system-ui;
    text-align: center;
    box-shadow: 0 30px 50px #b9b9b9;
    transition: 0.5s;
    overflow: hidden;
    max-height: 0;
}
.item .content .name{
    font-family: 'Anton', sans-serif;
}
.item:hover .content{
    max-height: 100px;
}
.item:hover{
    background-size: 250%;
}
.buttons{
    position: absolute;
    bottom:30px;
    left:0;
    text-align: center;
    width:100%;
}.buttons button{
    width:50px;
    height:50px;
    border-radius: 50%;
    border:1px solid #555;
    transition: 0.5s;
}
.buttons button:hover{
    background-color: #bac383;
}

Hướng dẩn chi tiết

Code HTML

Code CSS

Code Javascript

Thank You

Contact Form

Animation slideshow Html CSS Javascript | Css tutorial

Hướng dẩn chi tiết

Code HTML

Code CSS

Code Javascript

Contact Form