Сегодня мы бы хотели поговорить о том, как создать замечательную, анимированную шапку для сайта. Идея будет заключаться в следующем-у нас есть изображения часть которого будет скрыта под небольшим слоем градиента до середины изображения. При прокрутке страницы изображение будет уходить в левую часть страницы изменяя при этом свой размер, а также отображаясь в полном объеме, а с права у нас появится текстовый блок, когда пользователь будет прокручивать страницу то картинка будет неподвижной, а текст будет плавно скользить по странице.

 

Такой эффект станет отличным решением для блога, красивая анимация и оригинальный подход не оставит пользователя равнодушным, ведь проект будет казаться достаточно свежим и с оригинальной идеей.

Шаг 1. HTML

Как вы уже знаете, начинаем мы свои уроки с кучи текста и создания разметки, это первое, что мы рекомендуем делать, разметка у нас будет элементарной, вы можете сами в этом убедится:

Вы указываете весь текст и описание которое вам необходимо между тегами, а также устанавливаете свое изображение, при этом не забывайте указать правильный путь к стилям и скриптам.

Шаг 2. CSS

Большую часть работы у нас будет выполнять CSS, мы попытались описать в коде, какой участок за что отвечает, чтобы вы имели представление о структуре:

Шаг 3. JS

Последний шагом, нам необходимо, чтобы вся наша конструкция работа при прокрутке скролла и действия проходили так как мы захотим, поможет нам следующие функции:

Я думаю, такой подход к постам на сайте понравится вашим читателям, ведь мы все чаще встречаем такой прием на сайтах. Попробуйте, думаю ваши читатели будут приятно удивлены. А что вы думаете по этому поводу друзья?

Вот и все. Готово!