Уменьшение фоновой картинки при скролле страницы
Уже привычно, когда на главной странице сайте, первый экран занимает огромная картинка, вставленная фоном. Пользователь дальше скроллит вниз и фоновая картинка постепенно скрывается из вида. Однако этот процесс можно сделать гораздо интереснее, если при скролле картинка будет уменьшаться и в размерах. Получится эффект отдаления, ощущение глубины.
HTML код
Создадим блок с идентификатором header, куда в дальнейшем поместим фоновую картинку и секцию с длинным текстом.
<div id="header"></div>
<section>
<h2>Background Size Change into Small when Scrolling</h2>
<p>здесь будет много текста, чтобы появился скролл</p>
</section>
CSS код
Сначала увеличим размер фоновой картинки на 160%, чтобы при скролле картинка принимала свой первоначальный размер.
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*реальная ширина элемента*/
font-family: 'Poppins', sans-serif;/*название шрифта*/
}
#header{
position: relative;/*относительное позиционирование*/
width: 100%;/*на всю ширину экрана*/
height: 100vh;/*на всю высоту*/
background: url(bg.jpg);/*ссылка на фоновую картинку*/
background-size: 160%;/*увеличение размера картинки*/
background-position: center;/*позиция картинки в центре*/
background-attachment: fixed;/*фон зафиксирован сверху*/
}
section{
padding: 50px;/*промежуток между текстом и шапкой*/
color: #111;/*цвет текста*/
}
section h2{
font-size: 2.5em;/*размер шрифта*/
margin-bottom: 10px;/*отступ снизу*/
}
section p{
font-size: 1.2em;
}
JavaScript
Найдем на странице header и занесем его в переменную bg. Дальше будем отслеживать в браузере событие scroll и запускать функцию, когда оно произойдет. Функция должна сделать две вещи:
<script type="text/javascript">
let bg = document.getElementById("header")
window.addEventListener("scroll", function(){
bg.style.opacity = 1 - +window.pageYOffset/700+'';
bg.style.backgroundSize = 160 - +window.pageYOffset/12+"%";
})
</script>
Посмотрите пример на CodePen
