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

 

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

Шаг 1. HTML

Разметка достаточно простая, у нас будет один общий класс, который будет заключать всю нашу конструкцию в единый блок, затем для каждой новой страницы/слайда нам потребуется новый класс, к которому мы добавляем текстовый блок.

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

Эффект прокрутки страницы с помощью jQuery

Шаг 2. CSS

Теперь нам необходимо стилизовать блоки, задать параметры его вращения и позиционирования в пространстве, эту также добавить позицию для каждого блока и его заливку:

Шаг 3. JS

Нам необходимо получить красивую плавную анимацию, а также учитывать активный слайд и отображать его в навигации, это нам поможет реализовать несколько функций js:

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

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