7 730 Скрипты / Slider

CSS3 параллакс слайдер

Сейчас стало появляться все больше сайтов с таким интересным эффектом, который получил название параллакса. Это оптический эффект, как правило сопровождающийся тем, что один объект движется относительно другого с большей или меньшей скоростью. В нашей статье мы обойдемся без использования jаvascript, реализуем параллакс возможностями CSS3.

HTML

Посмотрим на html разметку:

У нас 4 radio элемента и 4 label для них же, а также 4 слайда. Каждый слайд имеет собственное изображение и небольшое описание. В каждом слайде Вы можете добавить и каки-то другие свои элементы.
Основная идея - скрыть radio кнопки и использовать label в порядке, который устанавливается состоянием "checked" для radio элементов. И применять различные CSS свойства в соответсвии с выбранным "checked" radio элементом.

CSS

Перейдем к стилям. Ниже стили общие для наших основных элементов слайдера, инпуты и их лейблы:

Как Вы видите - все checkboxскрыты. Нам не нужно их показывать. Вместо этого, мы будем использовать label-ы. Каждый label выглядит в виде оранжевого круга, изменяющего свою прозрачность при наведении курсора. И обратите внимание, что по умолчанию все элементы управления (label элементы) - скрыты. Мы будем отображать необходимый элемент управления (кнопки вверх и вниз) только при активном соответствующем слайде.
Следующие свойства CSS для слайдов (с label) и для заднего фона объектов.

Тут мы видим, что наш основной background имеет абсолютное позиционирование (.pss_background) и имеет переходы (transition) связанные с изменением свойства background-position. То есть, когда у нас происходит смена слайда, то изменяется и позиция фона.
Наши слайды выполнены ввиде неупорядоченного списка. Эти слайды имеют переход связанный только с изменением прозрачности. Когда мы сменим слайд, мы будем изменять позицию top для родителя слайдов (ul элемент), и текст описания будет изменять свое положение - left.
И наконец, последняя особенность - будем менять цвет фона для .pss_slides в зависимости от выбранных элементов (слайда).

Скачать 1756Загрузок 741,91 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи