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

Такой слайдер отлично впишеться в шапку сайта, что, несомненно, задаст тон всему дизайну сайта, давайте приступим к процессу создания слайдера.

Шаг 1. HTML

Для начала мы создаем контейнер в котором будет содержаться все наши изображения:

Затем мы добавляем класс slider__text, в котором будет содержаться информация с подписями и слоями для текста, мы добавляем отдельный класс slider__text-item-head который отвечает за заголовок слайдера и slider__text-item-info который отвечает за описание к слайдеру:

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

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

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

Шаг 2. CSS

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

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

Шаг 3. JS

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

В результате у нас получился замечательный слайдер с эффектом параллакcа.

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

 

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