CSS: Анимация при прокрутке страницы (используем jQuery и CSS3)
HTML разметка
HTML для нашего примера наипростейшее, все что нам нужно это заголовок h1 внутри элемента header. А для наглядности примера добавим картинку с призом к действию =)
<header>
<h1>Просто заголовок</h1>
</header>
<img fetchpriority="high" decoding="async" src="large-image.jpg" width="782" height="2000" />
jQuery
CSS transitionsявляются лучшим способом обработки анимации нашего заголовка (об этом ниже). Все, для чего мы используем JQuery, так это определение момента прокрутки страницы.
Когда положение прокрутки окна больше, чем 1px — это означает, что пользователь прокрутил страницу вниз. Данное положение определяется с помощью метода scrollTop(), который возвращает количество пикселей, скрытых от глаз сверху. Далее мы добавляем заголовку (метод addClass()) класс sticky; в противном случае, когда пользователь прокручивает страницу к самому началу мы удаляем этот класс (метод removeClass()).
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
} else{ $('header').removeClass("sticky");
}});
Стили CSS
Все, что нам осталось сделать, так это обозначить 2 состояния стилизации заголовка: по-умолчанию и в момент скроллинга.
Для начала, давайте добавим стили по-умолчанию, которые улучшают внешний вид заголовка:
header {
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif; /* Плавное изменение CSS свойств */
-webkit-transition: all 0.4s ease; transition: all 0.4s ease;
}
Сразу хочу заметить CSS transition задается в стиле по-умолчанию. Из конструкции свойства transition видно, что мы изменяем все свойства элемента (transition-property — all), за 0.4 секунды (transition-duration — 0.4s), с ускорением ease (transition-timing-function — ease).
Теперь описываем класс sticky, применяемый к заголовку во время прокрутки. Есть несколько вещей, которые мы хотим сделать с заголовком: во-первых, необходимо чтобы заголовок стал меньше, а также должен измениться цвет фона и текст выровняться по левому краю:
header.sticky {
position: fixed;
font-size: 24px;
line-height: 48px;
height: 48px;
width: 100%;
background: #efc47D;
text-align: left;
padding-left: 20px;
}
Готово! На основе этого примера Вы можете делать абсолютно любые манипуляции с HTML элементами страницы во время прокрутки, все что потребуется jQuery, CSS и Ваши идеи!
Похожие записи
