Эффект шапки сайта при прокрутки страницы | RUDEBOXЯ неоднократно встречал на сайтах шапки, которые при прокрутке страницы начинают вести себя разнообразно, красивая анимация, плавность переходов-это не только красиво, но еще весьма удобно для посетителя, ведь он всегда имеет под рукой быструю навигацию, а это дополнительные просмотры для вашего сайта. В данном уроке мы рассмотрим интересные анимированные эффекты при прокрутке, меню будет по мере прокрутки видоизменяться с плавностью переходов. Демонстрационный пример, с перечисленными эффектами служит только для показа различных видов анимации.

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

Шаг 1. HTML

Заголовок состоит из различных частей, которые будут демонстрировать все эффекты.

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

С разметкой мы закончили, теперь давайте перейдем к следующему шагу.

Эффект шапки сайта при прокрутки страницы RUDEBOX

Шаг 2. CSS

Немного разъясним, атрибуты data предназначены для проверки специальных классов, в зависимости от направления прокручивания страницы. Пример классов состояния “rotate”:

Классы состояния применяются к шапке сайта. Исходя из этого мы можем определить содержимое внутреннего контейнера.

Шаг 3. JS

Кроме всего выше перечисленного мы будем использовать небольшой плагин  Waypoints с помощью которого мы просто добавляем необходимые классы:

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: