Слайдер на CSS3 с эффектом параллакса

10 сентября 2013 | Опубликовано в css | 7 Комментариев »

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

В демо использована графика: 5Milli (Global Vector Map) и WeGraphics (Free Vector Infographic Kit).

Демо Загрузить материалы

Разметка

Мы «соединим» входные элементы (input) с блоками "sp" класса при помощи общего одноуровневого элемента. Для этого мы оставим «inputs» на том же самом уровне, как блоки класса «sp». Когда мы нажмем на «input», мы изменим фоновый цвет (background color) и позицию фона (background position) и также положение блока класса «sp-parallax-bg» (мировая карта) с переходами. Определенный слайд будет показан в виде движущего элеменка списка «ul» класса «sp-slider» в правую позицию. Разметка выглядит следующим образом:

<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» и классом «sp-parallax-bg» 100%. Блок класса «sp-content» будет иметь «background-color» и «background-image» (сетка), который будет перемещаться всякий раз, когда мы двигаем элемент списка «ul». У блока класса «sp-parallax-bg» будет карта в качестве фонового изображения и мы также передвинем «background-position».

.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;
}

Стили «input» и «label»:

.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;
}

Мы установили прозрачность для «inputs» «0», чтобы они не были видимыми. «Labels» находятся под радио кнопкой и мы сделаем их в виде маленьких кружков. Все «input» и «label» будут позиционировать себя абсолютно и мы поместим их друг за другом с применением «margin-left».

Затем мы зададим стили стрелок, которые являются тегами «label» с соответствующим атрибутом «for». Отметьте, что клик на «label» для активации связующего «input» мог не сработать в мобильных браузерах. Но так или иначе, вы можете перемещаться по точкам, так как мы фактически нажимаем на «inputs».

Стили будут выглядеть так:

.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;
}

Когда выбран «input», блок «sp-content» будет переходить в «background-position» и «background-color». Второй переход будет происходить немного дольше:

.sp-slideshow input:checked ~ .sp-content {
    transition: background-position linear 0.6s, background-color linear 0.8s;
}

Блок с мировой картой (sp-parallax-bg) будет также переходить в «background-position»:

.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
    transition: background-position linear 0.7s;
}

В этом случае мы можем добавить эффект параллакса.

Давайте зададим изменение цвета и «background-position» для блока «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;
}

… и для блока «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 слайдов. Они будут переходить влево, что мы изменим в зависимости от «input»:

.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”. Это позволит нам установить внутренний отступ (padding), а также использовать 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%;
}

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

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;
}

Это все! Надеюсь, что вам понравилось!

Автор урока RING WANG.

Опубликовано в css, сентября 10, 2013
Метки: дежурка, слайдер CSS3, слайдер с эффектом параллакса, урок css, урок css3, уроки css, эфект паралакса, эффект параллакса

�

Al
10 сентября 2013 в 15:16
-2

вот бы ещё запилить под модуль джумлы)
Владимир
21 сентября 2013 в 18:30
-1

Добрый день!
Объясните, пожалуйста, подробней как слайдер переключается без JS ивентов, в чём сила
Владимир
21 сентября 2013 в 19:45
0

вопрос снят спасибо за статью!
сергей
27 февраля 2014 в 7:27
0

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