Автор

Резиновый слайдер с эффектом параллакса

Резиновый слайдер с эффектом параллакса


 

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

 

ДЕМО
ИСХОДНИКИ

 

Главный плюс данного ротатора, что при изменении размера браузера происходит масштабирование слайдера с правильными пропорциями. Это весьма удобно, ведь разрешения монитора у каждого разное плюс это положительно сказывается на дизайне сайта. И так, для начала мы рассмотрим разметку HTML. Нам необходимо связывать элементы ввода с элементами div, для которых задан класс sp-content,с помощью комбинатора соседних элементов. Поэтому элементы ввода будут располагаться на том же уровне в структуре DOM, что и элементы div с классом sp-content.

<div>
    <input id="button-1" type="radio" name="radio-set" checked="checked" />
    <label for="button-1"></label>
    <input id="button-2" type="radio" name="radio-set" />
    <label for="button-2"></label>
    <input id="button-3" type="radio" name="radio-set" />
    <label for="button-3"></label>
    <input id="button-4" type="radio" name="radio-set" />
    <label for="button-4"></label>
    <input id="button-5" type="radio" name="radio-set" />
    <label for="button-5"></label>
    <label for="button-1"></label>
    <label for="button-2"></label>
    <label for="button-3"></label>
    <label for="button-4"></label>
    <label for="button-5"></label>
    <div>
        <div></div>
        <ul>
            <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 -->

Когда на элементе ввода нажмете клавишу мыши, для фона происходит смена цвета и положения, а также меняется положение фона для элемента div sp-parallax-bg. При имении параметров используются трансформации.

Теперь рассмотрим стилизацию CSS3. Устанавливаем ширину основного контейнера 80%, а ширину элементов с классами sp-contentи sp-parallax-bg 100%

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

Элемент div sp-content будет иметь фоновые цвет и изображение, которые будут изменяться при каждом перемещении пункта списка.  Элемент div sp-parallax-bg будет иметь фоновое изображение в виде карты мира, которое также будет перемещаться. Стили элементов ввода и меток:

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

Затем определяем стили для стрелок, которые являются простыми метками с соответствующим атрибутом for. Метки стрелок имеют следующие стили:

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

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

.sp-slider {
    position: relative;
    left: 0;
    width: 500%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: left ease-in 0.8s;
}

Для слайда и изображения будет установлено значение “border-box” для свойства box-sizing:

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

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

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеJS

Резиновый слайдер с эффектом параллакса

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


Резиновый слайдер с эффектом параллакса

Еще одна полезная для сайтов вещь - вставка текущей даты. Примеров скриптов даты можно найти в интернете десятки, однако многие из них, на мой взгляд, тяжеловесны и, следовательно, некрасивы. Между тем, используя стандартные средства JavaScript, вставить дату на страницу сайта можно очень просто. Я его очень часто применяю! На картинке (скриншот с действующего сайта)  усадьбы «Сказка»!


Резиновый слайдер с эффектом параллакса

Наверное каждый веб мастер сталкивался с проблемой как оформить на своем сайте или на сайте клиента кнопки «поделиться» от известных социальных сетей, при этом не используя сторонних сервисов. Хочу продемонстрировать очень, на мой взгляд интересное решение.


Резиновый слайдер с эффектом параллакса

Вчера рылся в инете на предмет найти что-то интересное и удача не обошла меня стороной, я нарыл на зарубежном сайте этот пример Parallax Scroll Effects, правда пришлось немного повозиться чтоб его скачать, а точнее сохранить себе. Буквально около 3 часов мытарства собрал всё воедино, и теперь вы сможете оценить, скачать и использовать в своих нуждах этот пример!


87 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close