Полезное
637 статей › RSS

Уроки веб-дизайна. Как сделать вертикальный слайдер с параллакс-скроллингом с помощью CSS3

Параллакс-скроллинг — фантастический новый тренд в веб-дизайне, который, при правильном использовании, позволяет достичь «вау-эффекта». Суть его в том, что фон и другие элементы веб-страницы двигаются с разной скоростью при прокрутке. Этот эффект создает иллюзию глубины, вовлекает посетителя во время навигации по сайту. Это довольно мило, и делает ваш сайт гораздо интереснее!

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

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

Уроки верстки и вебдизайна 

К преимуществам параллакс-скроллинга стоит отнести:

  • Удерживает интерес пользователя;
  • Запоминается надолго;
  • Позволяет более четко передавать сообщения;
  • Дает возможность разместить всю нужную информацию на одной странице;
  • Хорошо работает с другими модными трендами: большими изображениями и крупными шрифтами.

Сегодня Freelance.Today научит вас делать вертикальный слайдер с эффектом параллакс-прокрутки c помощью CSS3.

Такой прием можно использовать на лендингах, товарных страницах – позволит показать вещицу со всех сторон, и расписать ее преимущества, или продемонстрировать линейку товара.

Мы не будем использовать JavaScript, только чистые CSS3 свойства.
 


Как выглядит конечный результат


Приступим :)

 

Шаг 1. HTML

Посмотрите на HTML-код. Есть четыре тега <input> с атрибутом type и элементом формы radio, четыре <label> для них (выступают в качестве контролеров), а также четыре слайда (или страницы). Каждый слайд имеет собственное изображение, а также некоторое текстовое описание. Вы можете добавить больше элементов для каждого слайда – еще картинки или текст. Основная идея — скрыть кнопки, заданные переключателем radio, и использовать эти метки для того, чтобы установить статус «Включено» (“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

Теперь пришло время определить стили для нашего слайдера. Это общие стили для нашего главного элемента, тегов <input>, и их меток (<label>): 

 

 

.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). У него есть переход при смене позиции. Когда мы изменим слайд, положение фона изменяется тоже. Слайды представляют собой неупорядоченный список. Если меняется слайд, меняется положение текстовых меток. И последняя особенность — меняется цвет фона, в зависимости от выбранного элемента (слайда).

 

Вот таким простым способом мы создали вертикальный слайдер с эффектом параллакса, используя только CSS3.

Надеемся, вам пригодится этот урок.

Удачи!

 

Источник 

    Понравилась статья? Поделись с друзьями!

    Поделиться

или

следи за новостями в соцсетях

Подпишись на рассылку.

Без рекламы и только самое интересное!

Комментарии

Всего: 0 комментариев

Оставлять комментарии могут только пользователи.

Подписка на Freelance.Today





или

следи за новостями в соцсетях


Фриланс новости, биржи фриланса, freelance