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

 

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

Шаг 1. HTML

Для начала нам необходимо загрузить библиотеку jQuery и плагин jQuery mousewheel в нашу структуру html-документа.

Затем загружаем и подключаем файлы плагина PageScroll3D к нашему документу.

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

Вся разметка будет обвернута в единый класс main-content, стили которого будут отвечать за правильное отображение нужного контента на странице.

Шаг 2. CSS

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

Шаг 3. JS

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

В результате у нас получился прекрасный 3D слайдер реализованный с помощью Page Scroll 3D и jQuery который не оставит равнодушным любого посетителя Вашего ресурса.

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

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