Уменьшение баннера при прокрутке страницы вниз
Наверняка вы много раз видели на сайтах, как фоновая картинка при прокрутке вниз плавно уменьшалась в размерах до полного исчезновения, чтобы дать возможность пользователю просматривать контент. Давайте приступим к реализации этого эффекта.
HTML разметка
Как нетрудно догадаться, мы создали для баннера пустой блок. Во втором блоке расположиться контент.
<div class="banner"></div>
<div class="content">Здесь будет контент</div>
CSS код
Растянем на весь первый экран большое изображение и зафиксируем его, чтобы изображение не прокручивалось вместе со страницей.
.banner {
background: url('banner.jpg') no-repeat center center;
background-size: cover; // без потери пропорций
position: fixed; // фиксация картинки наверху
height: 100vh; // высота на весь экран
width: 100%; // по ширине на весь экран
}
.content {
background-color: #fff; // цвет фона под контент
height: 2000px; // высота блока с контентом
position: relative;
top: 100vh;
}
JavaScript код
Нам нужно отследить событие прокрутки, поэтому первым аргументом вешаем слушатель addEventListener на событие scroll. Вторым аргументом через запятую передаем функцию. Внутри function объявляем переменную scroll (название дается по смыслу) и присваиваем ей свойство pageYOffset (отступ сверху). Находим наш баннер по селектору и присваиваем его второй переменной.
Что делает свойство pageYOffset?
Оно возвращает число пикселей, на которое была прокручена страница по вертикали.
window.addEventListener('scroll', function () {
let scroll = window.pageYOffset;
let banner = document.querySelector('.banner');
banner.style.transform = ('translate3d(0,' + (scroll / 100) + '%,0) scale(' + (100 - scroll / 100) / 100 + ')');
});
В последней строке мы указываем, что при прокрутке для баннера в стилях следует применить свойство 3d-трансформации transform со значениями translate3d (плавно менять местоположение) и scale (плавно уменьшать баннер). Внутри translate3d передадим три параметра:
- X - 0
- Y - текущая позиция прокрутки поделенная на 100 и плюс проценты.
- Z - 0
Если вас заинтересовало, как с помощью JavaScript можно создавать много чего полезного для сайта, то приглашаю вас познакомиться с моим видеокурсом. Курс помимо всей необходимой теоретической информации, содержит много практических примеров и упражнений. За более подробной информацией, переходите прямо сейчас!
-
Создано 18.05.2020 10:09:21
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.