В нашем сегодняшнем руководстве мы хотим рассказать вам о процессе создания слайд-шоу с параллакс-эффектом при помощи параметров CSS3. Мы воспользуемся радио-кнопками и смежными комбинаторами для управления отображением слайдов. Здесь у нас будет два фона, и идея заключается в том, чтобы сменять расположение фона и позицию слайдера с переходами для создания незначительно parallax-эффекта.
Графические элементы, использованные в демо, были любезно предоставлены 5Milli (Global Vector Map) и WeGraphics (Free Vector Infographic Kit).
Пожалуйста, учтите: результат данного руководства будет работать только в тех браузерах, где имеется поддержка соответствующих CSS-параметров.
Верстка
Мы «привяжем» элементы ввода к отделу с классом «sp-content» за счет смежного комбинатора. Для этого нам нужно будет оставить поля ввода на том же уровне, на котором находится div sp-content. Когда мы кликаем по элементу ввода, мы изменяем цвет фона и расположение фона (текстура сетки), а также расположение фона div’а sp-parallax-bg (карту мира), сопровождая все это переходами. Соответствующий слайд будет отображен за счет перемещения sp-slider ul вправо. Код выглядит следующим образом:
<div class="sp-slideshow"> <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" /> <label for="button-1" class="button-label-1"></label> <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" /> <label for="button-2" class="button-label-2"></label> <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" /> <label for="button-3" class="button-label-3"></label> <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" /> <label for="button-4" class="button-label-4"></label> <input id="button-5" type="radio" name="radio-set" class="sp-selector-5" /> <label for="button-5" class="button-label-5"></label> <label for="button-1" class="sp-arrow sp-a1"></label> <label for="button-2" class="sp-arrow sp-a2"></label> <label for="button-3" class="sp-arrow sp-a3"></label> <label for="button-4" class="sp-arrow sp-a4"></label> <label for="button-5" class="sp-arrow sp-a5"></label> <div class="sp-content"> <div class="sp-parallax-bg"></div> <ul class="sp-slider clearfix"> <li><img src="images/image1.png" alt="image01" /></li> <li><img src="images/image2.png" alt="image02" /></li> <li><img src="images/image3.png" alt="image03" /></li> <li><img src="images/image4.png" alt="image04" /></li> <li><img src="images/image5.png" alt="image05" /></li> </ul> </div><!-- sp-content --> </div><!-- sp-slideshow -->
Элементы списка выполняют роль оболочек для каждого слайда и, хотя здесь мы используем простые изображения, мы можем использовать любой тип наполнения.
CSS-код
Мы выставим ширину основного контейнера на 80%, а также ширину подразделений с классами sp-content и class sp-parallax-bg на 100%. У div’а sp-content цвет фона и изображение фона будут перемещаться по мере переключения ul слайдера. Div sp-parallax-bg будет оснащен картой в качестве фонового изображения, и мы также изменим расположение фона.
.sp-slideshow { position: relative; margin: 10px auto; width: 80%; max-width: 1000px; min-width: 260px; height: 460px; border: 10px solid #fff; border: 10px solid rgba(255,255,255,0.9); box-shadow: 0 2px 6px rgba(0,0,0,0.2); } .sp-content { background: #7d7f72 url(../images/grid.png) repeat scroll 0 0; position: relative; width: 100%; height: 100%; overflow: hidden; } .sp-parallax-bg { background: url(../images/map.png) repeat-x scroll 0 0; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
Стилизация элементов ввода и ярлыков:
.sp-slideshow input { position: absolute; bottom: 15px; left: 50%; width: 9px; height: 9px; z-index: 1001; cursor: pointer; opacity: 0; } .sp-slideshow input + label { position: absolute; bottom: 15px; left: 50%; width: 6px; height: 6px; display: block; z-index: 1000; border: 3px solid #fff; border: 3px solid rgba(255,255,255,0.9); border-radius: 50%; transition: background-color linear 0.1s; } .sp-slideshow input:checked + label { background-color: #fff; background-color: rgba(255,255,255,0.9); } .sp-selector-1, .button-label-1 { margin-left: -36px; } .sp-selector-2, .button-label-2 { margin-left: -18px; } .sp-selector-4, .button-label-4 { margin-left: 18px; } .sp-selector-5, .button-label-5 { margin-left: 36px; }
Мы выставили уровень плотности отображения для элементов ввода на 0, так что они не будут видны. Ярлыки будут расположены под радио-кнопками, и мы выполним их в виде небольших кружочков. Все элементы ввода и ярлыки будут иметь абсолютное позиционирование, и мы расположим их друг против друга за счет применения левого поля.
Далее мы оформим стрелочки, которые, по сути, представляют собой ярлыки с соответствующими атрибутами. Учтите, что клик по ярлыку для активации связанного элемента ввода может не функционировать в мобильных браузерах. Но в любом случае, вы можете перемещаться, используя точки, так как на самом деле мы кликаем по элементам ввода.
Ярлыки в виде стрелочек будут оформлены следующим образом:
.sp-arrow { position: absolute; top: 50%; width: 28px; height: 38px; margin-top: -19px; display: none; opacity: 0.8; cursor: pointer; z-index: 1000; background: transparent url(../images/arrows.png) no-repeat; transition: opacity linear 0.3s; } .sp-arrow:hover{ opacity: 1; } .sp-arrow:active{ margin-top: -18px; }
Теперь давайте определим, когда должна быть отображена каждая стрелка. На первом слайде мы, к примеру, не хотим отображать левую стрелку. А на последнем слайде нам нужно скрыть правую стрелочку:
.sp-selector-1:checked ~ .sp-arrow.sp-a2, .sp-selector-2:checked ~ .sp-arrow.sp-a3, .sp-selector-3:checked ~ .sp-arrow.sp-a4, .sp-selector-4:checked ~ .sp-arrow.sp-a5 { right: 15px; display: block; background-position: top right; } .sp-selector-2:checked ~ .sp-arrow.sp-a1, .sp-selector-3:checked ~ .sp-arrow.sp-a2, .sp-selector-4:checked ~ .sp-arrow.sp-a3, .sp-selector-5:checked ~ .sp-arrow.sp-a4 { left: 15px; display: block; background-position: top left; }
Когда выделен какой-либо элемент ввода, div sp-content будет оформлен переходом для параметров background-position и the background-color. Второй переход займет немного больше времени:
.sp-slideshow input:checked ~ .sp-content { transition: background-position linear 0.6s, background-color linear 0.8s; }
Div с картой мира (sp-parallax-bg) также будет оформлен переходом для параметра background-position:
.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg { transition: background-position linear 0.7s; }
Таким образом, мы практически завершили разработку параллакс-эффекта.
Давайте укажем изменения цветов и background-position для div’а sp-content:
input.sp-selector-1:checked ~ .sp-content { background-position: 0 0; background-color: #727b7f; } input.sp-selector-2:checked ~ .sp-content { background-position: -100px 0; background-color: #7f7276; } input.sp-selector-3:checked ~ .sp-content { background-position: -200px 0; background-color: #737f72; } input.sp-selector-4:checked ~ .sp-content { background-position: -300px 0; background-color: #79727f; } input.sp-selector-5:checked ~ .sp-content { background-position: -400px 0; background-color: #7d7f72; }
…а также для div’а sp-parallax-bg:
input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg { background-position: 0 0; } input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg { background-position: -200px 0; } input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg { background-position: -400px 0; } input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg { background-position: -600px 0; } input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg { background-position: -800px 0; }
Неупорядоченный список с классом sp-slider будет иметь значение ширины равное 500%. Так нужно ввиду того, что у нас будет 5 слайдов. Здесь у нас будет переход для параметра left, так как он будет изменяться в зависимости от выбранного элемента ввода:
.sp-slider { position: relative; left: 0; width: 500%; height: 100%; list-style: none; margin: 0; padding: 0; transition: left ease-in 0.8s; }
Каждый элемент списка будет представлять собой слайд, и также будет оформлен переходом для параметра уровня плотности отображения. Как слайду, так и изображению внутри box-sizing мы зададим параметр «border-box». Это позволит нам выставить отступы, но и также использовать 100%-ное значение для высоты и ширины, и не беспокоиться о том, что что-то может зайти за край:
.sp-slider > li { color: #fff; width: 20%; box-sizing: border-box; height: 100%; padding: 0 60px; float: left; text-align: center; opacity: 0.4; transition: opacity ease-in 0.4s 0.8s; } .sp-slider > li img{ box-sizing: border-box; display: block; margin: 0 auto; padding: 40px 0 50px 0; max-height: 100%; max-width: 100%; }
Теперь нам нужно выставить корректные значения для параметра left для каждого выделенного слайда:
input.sp-selector-1:checked ~ .sp-content .sp-slider { left: 0; } input.sp-selector-2:checked ~ .sp-content .sp-slider { left: -100%; } input.sp-selector-3:checked ~ .sp-content .sp-slider { left: -200%; } input.sp-selector-4:checked ~ .sp-content .sp-slider { left: -300%; } input.sp-selector-5:checked ~ .sp-content .sp-slider { left: -400%; }
Каждый текущий слайд затем получит параметр уровня плотности отображения равный 1:
input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child, input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2), input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3), input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4), input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){ opacity: 1; }
И на этом всё! Надеемся, вам понравилось!
Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Вернуться назад
|