Как сделать раздел заголовка страницы с анимированным слайдером изображений, используя HTML и CSS

В этом видео вы научитесь создавать раздел заголовка веб-страницы с анимированным слайдером изображений, используя HTML, CSS и JS. Мы создадим эффект увеличения и уменьшения масштаба изображения слайдера, который сделает дизайн более привлекательным. Надеюсь, будет интересно.

СКАЧАТЬ

Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.

HTML КОД:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset='utf-8'/>
	<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
    <title>How To Make Image slider With Animation Using HTML And CSS</title>
    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
	<!--Font Awesome -->
	<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
    <!--Stylesheets-->
    <link rel="stylesheet" href="css/style.css">
</head>

<body onload="slider()">

    <div class="banner">
        <div class="slider">
            <img src="img/img-1.jpg" id="slideImg">
        </div>
        <div class="overlay">
            <div class="navbar">
                <div class="logo">
                    <img src="https://blogger.googleusercontent.com/img/a/AVvXsEhCLacKqasfOprYFR8RTJUQNvjHI7nWnUqfH8Cdy4ohVAcP5kaWH3M_u8_9wAlIL3OL9aetNBAXqlVeRXr6u8IPVwaVbb7mHfEEEcMaXvyY2iUW2miB_kVI1Jt9yxgqAJ_k8foXfjf87c_v0fC6_zGyXbre7Co2SouDfx7fn_TLFNhcKg8NTiayRkYv=s693" alt="">
                </div>
                <div class="menu-icons">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
                    <i class="fa fa-bars" aria-hidden="true"></i>
                </div>
            </div>

            <div class="content">
                <h1>LET'S START TO DESIGN</h1>
                <h3>Subscribe easy Tutorials YouTube channel to watch more videos, press the bell icon to get latest updates</h3>
                <div>
                    <button type="button">WATCH MORE</button>
                    <button type="button" class="btn-2">SUBSCRIBE</button>
                </div>
            </div>

        </div>
    </div>


   
</body>
</html>

CSS КОД:


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.banner {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;

}
.slider {
    width: 100%;
    /* height: 100%; */
    position: absolute;
    top: 0;
    overflow: hidden;
}
#slideImg {
    width: 100%;
    height: 100%;
    animation: zoom 3s linear infinite;
}
@keyframes zoom {
    0% {
        transform: scale(1.5);
    }
    15% {
        transform: scale(1);
    }
    85% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.5);
    }
}
.overlay {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    position: absolute;
    top: 0;
}
.navbar {
    width: 85%;
    display: flex;
    align-items: center;
    margin: 35px auto;
}
.logo {
    flex-basis: 15%;
}
.logo img {
    width: 120px;
    cursor: pointer;
}
.menu-icons {
    flex: 1;
    align-items: center;
    text-align: right;
}
.menu-icons i {
    color:#fff;
    width: 20px;
    margin-right: 40px;
    cursor: pointer;
}
.content {
    width: 60%;
    margin: 160px auto 0;
    text-align: center;
    color: #fff;
}
.content h1 {
    font-size: 60px;
}
.content h3 {
    width: 80%;
    margin: 20px auto 100px;
    font-weight: 100;
    line-height: 25px;
}
button {
    width: 200px;
    padding: 15px 0;
    text-align: center;
    margin: 0 10px;
    border-radius: 25px;
    font-weight: bold;
    border: 2px solid #fe7250;
    background: #fe7250;
    color: #fff;
    cursor: pointer;
    transition: background 0.5s;
}
button:hover {
    background: transparent;
    border: 2px solid #fff;
}
.btn-2 {
    background: transparent;
    border: 2px solid #fff;
}
.btn-2:hover {
    background: #fe7250;
    border: 2px solid #fe7250;
}

JAVASCRIPT КОД:


var slideImg = document.getElementById("slideImg");

        var images = new Array(
            "img/img-1.jpg",
            "img/img-2.jpg",
            "img/img-3.jpeg",
            "img/img-4.jpeg",
            "img/img-5.jpg"
        );

        var len = images.length;
        var i = 0;

        function slider(){
            if(i > len-1){
                i = 0;
            }
            slideImg.src = images[i];
            i++;
            setTimeout('slider()',3000);
        }