Animation Image Slider - Using CSS, HTML & Javascript

In this tutorial, we'll be creating an animation image slideshow using CSS, HTML and Javascript. We'll be using the theme and the animations.

If you're looking to create a beautiful and dynamic image slider, then this tutorial is for you! By the end of this tutorial, you'll have everything you need to create a stunning animation image slideshow using CSS, HTML and Javascript. So please take a minute to watch it now!

The channel is building 2 series: animation series with proejct and animation series for newbiesSee 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">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<title>Document</title>
</head>
<body>
    <div class="container">
        <div class="header" style="margin: 10px 30px">
            <img src="avatar.jpg" class="logo"/>
            <ul>
                <li>HOME</li>
                <li>CATEGORY</li>
                <li>INFO</li>
                <li>CONTACT</li>
            </ul>
           </div>
        <div class="effect">
            <div class="birt">
               <img src="bird1.gif" alt="">
            </div>
        </div>
        <div class="list">
            <div class="item" id="item_0">
                <img src="img2.jpg" alt="" />
               <div class="content">
                <h2>HO VIET HOANG</h2>
                <div class="content1">
                    Tính rủ anh đi cháy phố, chưa kịp cháy phố mà anh cháy mất tiêu <br/>
                    Tính rủ anh đi cháy phố, chưa kịp cháy phố mà anh cháy mất tiêu <br/>
                </div>
                <div class="button">
                    See More
                </div>
               </div>
            </div>
            <div class="item" id="item_1">
                <img src="img1.jpeg" alt="" />
               <div class="content">
                <h2>HO VIET HOANG</h2>
                <div class="content1">
                    Tính rủ anh đi cháy phố, chưa kịp cháy phố mà anh cháy mất tiêu <br/>
                    Tính rủ anh đi cháy phố, chưa kịp cháy phố mà anh cháy mất tiêu <br/>
                </div>
                <div class="button">
                    See More
                </div>
               </div>
            </div>
            <div class="item " id="item_2">
                <img src="img3.jpg" alt="" />
               <div class="content">
                <h2>HO VIET HOANG</h2>
                <div class="content1">
                    Tính rủ anh đi cháy phố, chưa kịp cháy phố mà anh cháy mất tiêu <br/>
                    Tính rủ anh đi cháy phố, chưa kịp cháy phố mà anh cháy mất tiêu <br/>
                </div>
                <div class="button">
                    See More
                </div>
               </div>
            </div>
        </div>
    <button id="next"><i class="fa-solid fa-angle-right"></i></button>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
</html>

Code CSS

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600&display=swap');
body{
    background-color: #dedee0;
    font-family: 'Quicksand', sans-serif;
}
.logo{
    border-radius: 50%;
    width:40px;
    height: 40px; display: inline-block;
}
.header ul{
    padding: 0;
    margin: 0;
    list-style: none; display: inline-block;
    transform: translate(0,-14px);
   
    
}
.header{
    color:#dedee0;
    position: absolute;
    z-index: 11111111111111;
    width:100%;
}
.header li{
    display: inline-block;
    font-size: 13px;
    margin-left:20px;
}

.container{
    background-color: #000;
    position: fixed;
    top:50%;
    left:50%;
    width:1000px;
    height: 600px;
    transform: translate(-50%, -50%);
    overflow: hidden;
}
.birt{
    transform: rotateY(192deg) rotate(-40deg);
    position: absolute;
    z-index: 7;
    right:50%;
    bottom:25%;
    transition: 1.5s;
}
.birt img{
    width:350px;
}
.item{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 5;
}
.item img{
    width:100%;
    height:100%;
    opacity: 0.5;
    object-fit: cover;
}
.content{
    position: absolute;
    bottom:0px;
    right:0px;
    padding:20px 40px 30px 0;
    width:330px;
    color:#BFC3C4

}
/* .content::before{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    content: '';
    background-color: #fff;
    content: '';
    z-index: -1;
} */
h2{
    position: relative;
    z-index: 100;
    font-family: 'Sora', sans-serif;
    font-size: 30px;
    color:#BFC3C4
}
.content1{
    margin-top:30px;
    padding:0 ;
    position: relative;
}
.button{
    margin:30px 0 ;
    border:1px solid #BFC3C4;
    width:max-content;
    padding:10px 20px;
    transition: 1s;
}
.item{
    display: none;
}
.active, .hide{
    display: block;
}
.active img{
    animation: showimg 1s ease-in-out 1 forwards;
}
.hide img{
    animation: hideimg 1s ease-in-out 1 forwards;
}
@keyframes showimg{
    0%{
        transform: translate(100%,0);
    }
    100%{
        transform: translate(0%,0);
    }
}
@keyframes hideimg{
    0%{
        transform: translate(0%,0);
    }100%{
        transform: translate(-100%,0);
    }
}
.active .content h2{
    opacity: 0;
    animation: showcontent 0.7s ease-in-out 1s 1 forwards;
}
.active .content .content1{
    opacity: 0;
    animation: showcontent 0.7s ease-in-out 1.2s 1 forwards;
}
.active .content .button{
    opacity: 0;
    animation: showcontent 0.7s ease-in-out 1.4s 1 forwards;
}
.hide .content h2, .content1, .button{
    animation: hidecontent 1.7s ease-in-out 1 forwards;
}
@keyframes showcontent{
    0%{
        filter: blur(33px);
        transform: translate(100%,0);
    }100%{
        filter: blur(0px);
        transform: translate(0%,0);
        opacity: 1;
    }
}
@keyframes hidecontent{
    0%{
        filter: blur(0);
        transform: translate(0%,0);
    }100%{
        transform: translate(-100%,0);
        filter: blur(33px);
        opacity: 0;
    }
}
.start .birt{
    animation:startbirt 3s ease-in-out 1 forwards;
}
.birt img{
    animation:birt 1s ease-in-out infinite alternate;
}
@keyframes birt{
    0%{
        transform: rotate(5deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
@keyframes startbirt{
    0%{

}
    50%{
        right: 31%;
        bottom: 16%;
        transform: rotateY(192deg) rotate(-52deg);
    }
    70%{
        bottom: 27%;
        transform: rotateY(192deg) rotate(-22deg);
    }
    100%{
        right: 50%;
        bottom: 25%;
    }
}
.start::before{
    position: absolute;
    width:100%;
    height: 4px;
    content: '';
    background-color: #EEA83D;
    z-index: 111;
    animation:time 3s ease-in-out 1 forwards
}
@keyframes time{
    0%{
        width:0;
    }90%{
        width:100%;
        top:0;
    }
    100%{
        top:-10px;
    }
}
.button:hover{
    background: azure;
    color: black;
}
#next{
    position: absolute;
    z-index: 111111111111111;
    bottom: 0;
    left: 0;
    padding: 20px;
    border: none;
    background-color: #fff;
    transition: 1s;
}
#next:hover{
    background: azure;
    color: black;
}

Code Javascript

$(document).ready(function(){
    var count_group = $(".list .item").length;
    var active = 0;
    var deg_bg = 0;
    var begin= true;
    function Load(){

if(begin){
            begin = false;
        }else{
            $('#item_'+(active - 2 < -1 ? count_group - 2 : active - 2 < 0 ? count_group -1 : active - 2)).removeClass('hide');
            $('#item_'+(active - 1 < 0 ? count_group - 1 : active - 1)).removeClass('active');
            $('#item_'+(active - 1 < 0 ? count_group - 1 : active - 1)).addClass('hide');
        }

$('#item_'+active).removeClass('hide');
        $('#item_'+active).addClass('active');

$('.dots-page div').removeClass('active');
        $('#dot_'+active).addClass('active');
        $('.effect').addClass('start');
        beginPosition();

setTimeout(function (){
            $('.effect').removeClass('start');
        }, 3000)
    }
    Load();
    
    $('#next').on('click', function(){
      active = active + 1 >= count_group ? 0 : active + 1;
      Load();
    })
        $('#prev').on('click', function(){
        active = active - 1 < 0 ? count_group - 1 : active - 1;
        })
    });
$('.button').hover(function(){
    if($(".effect").hasClass("start")){
        return;
    }
        $('.birt').css('right','31%');
        $('.birt').css('bottom','16%');
        $('.birt').css('transform','rotateY(192deg) rotate(-97deg)');
}
,function(){
       beginPosition();
});

function beginPosition(){
    $('.birt').css('right','50%');
    $('.birt').css('bottom','25%');
    $('.birt').css('transform','rotateY(192deg) rotate(-40deg)');
}

$('.item').hover(function(event){
    var $PosTop = event.pageY;
    var $PosLeft = event.pageX;
    var $height = $('.item').height();
    var $width = $('.item').width();
    var defaultTop = 25;
    var defaultLeft = 50;
    var topNew = $PosTop > ( $height/2) + 30 ? defaultTop - 10 :  defaultTop + 10;
    var leftNew = $PosLeft > ( $width/ 3) + 30 ? defaultLeft - 10 :   defaultLeft +10;
    $('.birt').css('right',leftNew +'%');
    $('.birt').css('bottom', topNew +'%');
    console.log($PosTop, ( $height/2) + 30);

}, function(){
    beginPosition();
});

Hướng dẩn chi tiết:

Code HTML

Code CSS

Code Javascript

Thank You

Contact Form