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

 

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

Шаг 1. HTML

По умолчанию все слайды кроме активного у нас будут скрыты, при этом мы добавляем обвертку для всего слайда с классом .slide, это позволит нам задать общие параметры, также мы добавили slider-control left inactive который нам необходим для навигации, а также slider-control right, которые обозначают направление при навигации и устанавливают соответствующие параметры:

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

Слайдер с эффектом параллакса с помощью jQuery

Шаг 2. CSS

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

Шаг 3. JS

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

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

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

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