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

Главный плюс данного ротатора, что при изменении размера браузера происходит масштабирование слайдера с правильными пропорциями. Это весьма удобно, ведь разрешения монитора у каждого разное плюс это положительно сказывается на дизайне сайта. И так, для начала мы рассмотрим разметку HTML. Нам необходимо связывать элементы ввода с элементами div, для которых задан класс sp-content,с помощью комбинатора соседних элементов. Поэтому элементы ввода будут располагаться на том же уровне в структуре DOM, что и элементы div с классом sp-content.

Когда на элементе ввода нажмете клавишу мыши, для фона происходит смена цвета и положения, а также меняется положение фона для элемента div sp-parallax-bg. При имении параметров используются трансформации.

Теперь рассмотрим стилизацию CSS3. Устанавливаем ширину основного контейнера 80%, а ширину элементов с классами sp-contentи sp-parallax-bg 100%

Элемент div sp-content будет иметь фоновые цвет и изображение, которые будут изменяться при каждом перемещении пункта списка.  Элемент div sp-parallax-bg будет иметь фоновое изображение в виде карты мира, которое также будет перемещаться. Стили элементов ввода и меток:

Затем определяем стили для стрелок, которые являются простыми метками с соответствующим атрибутом for. Метки стрелок имеют следующие стили:

Теперь определим, когда будут выводиться стрелки. На первом слайде не нужна стрелка влево, а на последнем — стрелка вправо:

Когда элемент ввода выбран, элемент div sp-content будет выполнять трансформацию для свойств background-position и background-color. Вторая трансформация будет выполняться немного дольше:

Элемент div с фоном в виде карты мира (sp-parallax-bg) также будет выполнять трансформацию свойства background-position:

Определим изменение цвета и свойства background-position для элемента div  sp-content:

Затем для элемента div sp-parallax-bg:

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

Для слайда и изображения будет установлено значение “border-box” для свойства box-sizing:

Теперь надо установить правильные значения для свойства left для каждого слайда:

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

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