Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Эффект параллакс-скроллинга при помощи css3

13 июня 2012 | Опубликовано в css | 14 Комментариев »

Разве вы не заметили, что в сети появилось много сайтов с эффектом параллакса? Сегодня мы будем применять этот эффект для вертикального слайдера. Для этого мы не станем использовать JavaScript, только чистый CSS3.

Перед началом выполнения урока, рекомендуем повторить селекторы атрибутов
Смотрите демонстрацию

Шаг 1. HTML

Посмотрите на нашу HTML- разметку. У нас есть четыре переключателя с назначенными идентификаторами и классами, а также четыре слайда (или страницы). Каждый слайд имеет собственное изображение и текст описания. Вы можете добавить больше элементов на своё усмотрение. Основная идея — спрятать радио-кнопки, и использовать эти метки, чтобы установить статус 'checked' для радиоэлементов и применять различные свойства CSS к каждому элементу.

<div class="pss_main"> <!-- main parallax scrolling slider object -->
    <input id="r_1" type="radio" name="p" class="sel_page_1" checked="checked" /> <!-- hidden radios -->
    <input id="r_2" type="radio" name="p" class="sel_page_2" />
    <input id="r_3" type="radio" name="p" class="sel_page_3" />
    <input id="r_4" type="radio" name="p" class="sel_page_4" />

    <label for="r_1" class="pss_contr c1"></label> <!-- controls -->
    <label for="r_2" class="pss_contr c2"></label>
    <label for="r_3" class="pss_contr c3"></label>
    <label for="r_4" class="pss_contr c4"></label>
    <div class="pss_slides">
        <div class="pss_background"></div>
        <ul> <!-- slides -->
            <li><img src="images/image1.png" alt="image01" />
                <div>Model DT 770</div>
            </li>
            <li><img src="images/image2.png" alt="image02" />
                <div>Model DT 990</div>
            </li>
            <li><img src="images/image3.png" alt="image03" />
                <div>Model DT 234</div>
            </li>
            <li><img src="images/image4.png" alt="image04" />
                <div>Model DT 880</div>
            </li>
        </ul>
    </div>
</div>

Шаг 2. CSS

Теперь пришло время добавить стили:

.pss_main {
    height:700px;
    position:relative;
    width:100%;
}
.pss_main input {
    display:none;
}
.pss_contr {
    background:#E0371E url(../images/up.png) no-repeat center center;
    cursor:pointer;
    display:none;
    height:70px;
    left:50%;
    opacity:0.3;
    position:absolute;
    top:5%;
    width:70px;
    z-index:2;
    /* css3 transition */
    -webkit-transition:opacity linear 0.3s;
    -moz-transition:opacity linear 0.3s;
    -o-transition:opacity linear 0.3s;
    -ms-transition:opacity linear 0.3s;
    transition:opacity linear 0.3s;
    border-radius:50% 50% 50% 50%;
    box-shadow:0 1px 2px #AF2C19 inset;
}
.pss_contr:hover {
    opacity:1;
}
.sel_page_1:checked ~ .pss_contr.c2, .sel_page_2:checked ~ .pss_contr.c3,
.sel_page_3:checked ~ .pss_contr.c4 {
    background-image:url(../images/down.png);
    display:block;
    top:85%;
}
.sel_page_2:checked ~ .pss_contr.c1, .sel_page_3:checked ~ .pss_contr.c2,
.sel_page_4:checked ~ .pss_contr.c3  {
    background-image:url(../images/up.png);
    display:block;
}

Как видите,  все инпуты скрыты. Вместо них мы будем использовать метки (красные круги со стрелками). При наведении курсора мыши у этих кругов будет изменяться прозрачность. И обратите внимание, что по умолчанию все элементы управления (элементы маркировки) скрыты. Мы будем отображать необходимые элементы управления (кнопки вверх и вниз), только при необходимости (для активного слайда). Вот наши стили для слайдов.

.pss_slides {
    height:100%;
    overflow:hidden;
    position:relative;
}
.pss_background {
    background:url(../images/bg.png) no-repeat scroll 0 0;
    height:100%;
    left:0;
    overflow:hidden;
    position:absolute;
    top:0;
    width:100%;

    /* css3 background-size */
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    -ms-background-size:cover;
    background-size:cover;
}
.pss_main input:checked ~ .pss_slides {
    /* css3 transition */
    -webkit-transition:all linear 1.0s;
    -moz-transition:all linear 1.0s;
    -o-transition:all linear 1.0s;
    -ms-transition:all linear 1.0s;
    transition:all linear 1.0s;
}
.sel_page_1:checked ~ .pss_slides {
    background-color:#CCCCCC;
}
.sel_page_2:checked ~ .pss_slides {
    background-color:#003366;
}
.sel_page_3:checked ~ .pss_slides {
    background-color:#FFFFFF;
}
.sel_page_4:checked ~ .pss_slides {
    background-color:#CCCC99;
}
.pss_main input:checked ~ .pss_slides .pss_background {
    /* css3 transition */
    -webkit-transition:all linear 1.5s;
    -moz-transition:all linear 1.5s;
    -o-transition:all linear 1.5s;
    -ms-transition:all linear 1.5s;
    transition:all linear 1.5s;
}
.sel_page_1:checked ~ .pss_slides .pss_background {
    background-position:0 0;
}
.sel_page_2:checked ~ .pss_slides .pss_background {
    background-position:0 -500px;
}
.sel_page_3:checked ~ .pss_slides .pss_background {
    background-position:0 -1000px;
}
.sel_page_4:checked ~ .pss_slides .pss_background {
    background-position:0 -1500px;
}
.pss_slides ul {
    height:100%;
    list-style:none;
    position:relative;
    top:0;

    /* css3 transition */
    -webkit-transition:top ease-in 1.0s;
    -moz-transition:top ease-in 1.0s;
    -o-transition:top ease-in 1.0s;
    -ms-transition:top ease-in 1.0s;
    transition:top ease-in 1.0s;
}
.pss_slides ul  li {
    height:100%;
    opacity:0.1;
    position:relative;
    text-align:center;

    /* css3 transition */
    -webkit-transition:opacity ease-in 1.0s;
    -moz-transition:opacity ease-in 1.0s;
    -o-transition:opacity ease-in 1.0s;
    -ms-transition:opacity ease-in 1.0s;
    transition:opacity ease-in 1.0s;
}
.sel_page_1:checked ~ .pss_slides ul li:first-child,
.sel_page_2:checked ~ .pss_slides ul li:nth-child(2),
.sel_page_3:checked ~ .pss_slides ul li:nth-child(3),
.sel_page_4:checked ~ .pss_slides ul li:nth-child(4) {
    opacity:1;
}
.pss_slides ul li img{
    display:block;
    margin:0 auto;
    padding:40px;
}
.pss_slides ul li div{
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:-20%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;
    /* css3 transition */
    -webkit-transition:left ease-in 1.0s;
    -moz-transition:left ease-in 1.0s;
    -o-transition:left ease-in 1.0s;
    -ms-transition:left ease-in 1.0s;
    transition:left ease-in 1.0s;
}
.sel_page_1:checked ~ .pss_slides ul {
    top:0;
}
.sel_page_2:checked ~ .pss_slides ul {
    top:-100%;
}
.sel_page_3:checked ~ .pss_slides ul {
    top:-200%;
}
.sel_page_4:checked ~ .pss_slides ul {
    top:-300%;
}
.sel_page_1:checked ~ .pss_slides ul li:first-child div,
.sel_page_2:checked ~ .pss_slides ul li:nth-child(2) div,
.sel_page_3:checked ~ .pss_slides ul li:nth-child(3) div,
.sel_page_4:checked ~ .pss_slides ul li:nth-child(4) div {
    left:10%;
}

Таким образом, у нас есть основной фон с абсолютным позиционированнием (pss_background element). Для свойства background-position установлены переходы (transition). Поэтому, когда мы меняем слайд, положение фона тоже меняется. Наши слайды имеют включены в неупорядоченный список. Когда мы меняем слайд, меняется верхнее положение родителей наших слайдов (UL-объекта). Мы будем также изменить положение (слева) для текстовых меток. И последнее, мы будем менять цвет фона «pss_slides» в зависимости от выбранного элемента(slide).
Смотрите демо
Автор — script-tutorials

Перевод-дежурка




Комментарии

  1. Илья
    Thumb up Thumb down +2

    к сожалению, очень кривенько

    Elena Ответ:

    Thumb up Thumb down 0

    Ну как-то так...Илья, можно поподробней о недостатках этого способа?

    Илья Ответ:

    Thumb up Thumb down +1

    Сам способ вполне себе хороший, я про то, как реализованно. Плашки на разных местах, анимация совсем не плавная, фон меняется тоже странно, ну и мелочи как кривенькно фото обртавленны.

    Подшлифовать бы, было бы хорошо. Удачи)

    Константин Ответ:

    Thumb up Thumb down 0

    У меня в Хроме всё чётко, кроме обтравки.

    Vampireos Ответ:

    Thumb up Thumb down 0

    Всё абсолютно чётко и гладко =)

    ..дружно все переходим на Огнелиса :-D

    Илья Ответ:

    Thumb up Thumb down 0

    Да с радостью!) Но не забываем что мы должны не забывать о кроссбраузерности. Да, я на опере только в силу привычки сижу =)

    Макс Ответ:

    Thumb up Thumb down 0

    В Опере 12.0 самая плавная анимация (по крайней мере у меня). Проверял также на FF13, Chrome 19, Safari 5. Порадовала-таки меня новая опера с этой стороны))

    Vampireos Ответ:

    Thumb up Thumb down 0

    странно у мя Опера и Опера некст после нажатия на стрелку застывает)

    ..такш у мя на компе Огнелис 16 побеждает с явным превосходством^ ^

    поскрип: забавно там на наушниках после названия идут)))), наен и правд смешные наушники))

    поскрип2: ось ubuntu 12

  2. Beben Koben
    Thumb up Thumb down 0

    so parallax at all, it's full stylish 8)

    thanks for coded master *THUMBS UP*

  3. pavlik315
    Thumb up Thumb down +1

    еще на хабре вышел переводик про создание этого эффекта: habrahabr.ru/post/145772/

  4. Ксения
    Thumb up Thumb down 0

    Уменьшила ширину окна и последняя картинка осталась без фона. Похоже на один большой глюк.

  5. Op
    Thumb up Thumb down 0

    .sel_page_4:checked ~ .pss_contr.c3

    А кто знает что значит ~ между класами?

    Elena Ответ:

    Thumb up Thumb down +1

    В самом начале статьи ссылка (селекторы атрибутов), там и объясняется. ;)

  6. June.xxx
    Thumb up Thumb down 0

    А в чем резон это использовать? Или это на будущее?

    на Jquery в несколько строк скрипта так сделать и мне кажется меньше будет проблем.