Добрый день! Делаю сайт, стоит задача сделать так чтобы после прокрутки хотя бы на 50px, background-image уползал плавно вниз, как это можно сделать? (Background это рука с пакетом)
Код:
HTML
<header>
<div class="wrap">
<nav class="navbar navbar-light navbar-expand-lg">
<a class="navbar-brand" href="#">+7 747 333 3333</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#about">О нас</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Продукция</a></li>
<li class="nav-item"><a class="nav-link" href="#price">Наши клиенты</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Контакты</a></li>
</ul>
</div>
</nav>
<h2 class="title">Ardoplast</h2>
<div class="text">
производство<br>
полиэтиленовых<br>
пакетов
</div>
</div>
</header>
CSS:
header nav.navbar {
font-size: 22px;
font-weight: 500;
padding: 40px 0 150px;
}
header .navbar-brand {
font-size: 22px;
}
header .nav-link {
color: black;
}
header li {
padding: 15px;
}
header .show li {
display: block;
text-align: center;
padding: 10px;
}
header a {
position: relative;
}
header a::after {
content: '';
display: inline-block;
position: absolute;
width: 90%;
height: 90%;
top: 50%; left: 50%; transform: translate(-50%, -50%);
border: 1px solid #1049ba;
opacity: 0;
transition: 0.2s;
}
header a:not(.navbar-brand):hover::after {
content: '';
width: calc(100% + 15px);
height: calc(100% + 15px);
opacity: 100;
border: 3px solid #1049ba;
transition: 0.3s;
}
header .wrap {
background: url('../img/hand.webp') no-repeat;
background-position: 100% 0;
padding-bottom: 200px;
}
header .title {
position: relative;
font-size: 55px;
letter-spacing: 70px;
margin-bottom: 50px;
z-index: 10;
}
header .text {
position: relative;
margin-left: 35px;
font-size: 36px;
line-height: 75px;
text-transform: uppercase;
z-index: 10;
}
header .text::after {
content: '';
position: absolute;
width: 78px;
height: 71px;
bottom: -25px;
left: -36px;
background: url('../img/dots.webp') no-repeat;
z-index: -9;
}
header .title::after {
content: '';
position: absolute;
width: 78px;
height: 71px;
top: -25px;
left: 50%;
background: url('../img/dots.webp') no-repeat;
z-index: -9;
}
