Здравствуйте, уважаемые читатели XoZbloga! В этой не большой статье разберем способ, с помощью которого можно оживить статичные HTML элементы на странице. Тенденция, которая популярна в последнее время — это анимационное изменение элементов при прокрутке страницы. В данной статье мы создадим заголовок в самом верху страницы и в момент скроллинга будет происходить плавное изменение размера и цвета заголовка.
Вот как это будет выглядеть в итоге:
See the Pen iLjwa by Dmitry (@xozblog) on CodePen.
HTML разметка
HTML для нашего примера наипростейшее, все что нам нужно это заголовок h1 внутри элемента header. А для наглядности примера добавим картинку с призом к действию =)
1 2 | <header><h1>Просто заголовок</h1></header> <img src="large-image.jpg" width="782" height="2000" /> |
jQuery
CSS transitions являются лучшим способом обработки анимации нашего заголовка (об этом ниже). Все, для чего мы используем JQuery, так это определение момента прокрутки страницы.
Когда положение прокрутки окна больше, чем 1px — это означает, что пользователь прокрутил страницу вниз. Данное положение определяется с помощью метода scrollTop(), который возвращает количество пикселей, скрытых от глаз сверху. Далее мы добавляем заголовку (метод addClass()) класс sticky; в противном случае, когда пользователь прокручивает страницу к самому началу мы удаляем этот класс (метод removeClass()).
1 2 3 4 5 6 7 8 | $(window).scroll(function() { if ($(this).scrollTop() > 1){ $('header').addClass("sticky"); } else{ $('header').removeClass("sticky"); } }); |
Стили CSS
Все, что нам осталось сделать, так это обозначить 2 состояния стилизации заголовка: по-умолчанию и в момент скроллинга.
Для начала, давайте добавим стили по-умолчанию, которые улучшают внешний вид заголовка:
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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, применяемый к заголовку во время прокрутки. Есть несколько вещей, которые мы хотим сделать с заголовком: во-первых, необходимо чтобы заголовок стал меньше, а также должен измениться цвет фона и текст выровняться по левому краю:
1 2 3 4 5 6 7 8 9 10 | 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 и Ваши идеи!
Источник статьи/урока: https://xozblog.ru
По материалам: http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/