В этом видео вы научитесь создавать раздел заголовка веб-страницы с анимированным слайдером изображений, используя HTML, CSS и JS. Мы создадим эффект увеличения и уменьшения масштаба изображения слайдера, который сделает дизайн более привлекательным. Надеюсь, будет интересно.
Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
В архиве находится:
- Все демонстрационные изображения
- Исходные файлы HTML
- Исходные файлы CSS
- Иконки шрифтов
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;
}jаvascript КОД:
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);
}
