html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

В этом обучающем уроке мы создадим слайд-шоу с эффектом параллакса, используя несколько свойств 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.

Читайте также: Создание простой галереи изображений Lightbox на jQuery

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

4

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции