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

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

demosourse

 

Как устроена страница?

Слайдер содержит несколько слайдов, в каждом размещается элемент h2, абзац и элемент div с изображением.

<div id="da-slider" class="da-slider">
 
    <div class="da-slide">
        <h2>Заголвок</h2>
        <p>Описание</p>
        <a href="#" class="da-link">Прочитать все</a>
        <div class="da-img">
            <img src="images/1.png" alt="image01" />
        </div>
    </div>
 
    <div class="da-slide">
        <!-- ... -->
    </div>
 
    <!-- ... -->
 
    <nav class="da-arrows">
        <span class="da-arrows-prev"></span>
        <span class="da-arrows-next"></span>
    </nav>
 
</div>

Ядром слайдера являются анимации каждого элемента. Контролировать поведение элементов можно с помощью классов направлений, устанавливаемых для слайда. Например, когда слайд смещается вправо, он получит (с помощью JavaScript кода) класс “da-slide-toright”. Есть четыре возможных класса направлений:

  • .da-slide-fromright - при движении справа
  • .da-slide-fromleft - при движении слева
  • .da-slide-toright - при движении направо
  • .da-slide-toleft - при движении налево

Используя данные классы мы можем управлять анимациями каждого элемента:

/* Выскальзывание слайда справа */
.da-slide-fromright h2{
    animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright p{
    animation: fromRightAnim2 0.6s ease-in 0.8s both;
}
.da-slide-fromright .da-link{
    animation: fromRightAnim3 0.4s ease-in 1.2s both;
}
.da-slide-fromright .da-img{
    animation: fromRightAnim4 0.6s ease-in 0.8s both;
}
 
/* Параметры анимаций для разных элементов: */
@keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}

 

Опции

Доступны следующие опции плагина:

$('#da-slider').cslider({
 
    current     : 0,
    // Индекс текущего слайда
 
    bgincrement : 50,
    // Увеличение положения фона
    // (эффект параллакса) при скольжении слайда
 
    autoplay    : false,
    // Включение/выключение слайдшоу
 
    interval    : 4000
    // Время показа слайда
 
});

Эффект  параллакса создается смещением фона в направлении обратном движению слайда. Параметр bgincrement позволяет управлять эффектом.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
Перевел: Сергей Фастунов
Урок создан: 17 Марта 2012
Просмотров: 94280
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 21 Марта 2012 10:28
    Extremum
    Опера с ИЕ как обычно впереди планеты всей...слайдер есть, но эффектов нет(
    • 21 Марта 2012 13:05
      viktor.lavrenko
      Главное что сам слайдер работает. А параллакс оценят как-раз таки только пользователи огнелиса и хрома.
    • 21 Марта 2012 19:27
      Евгений Кондрашов
      Хм... У меня Опера, и всё отлично работает. Может просто нужно обновить браузеры?
      • 30 Июня 2012 19:32
        alexey_molodid
        В том-то и дело, что в 12-й, самой-самой новой Опере не работает этот слайдер! Застревает на втором слайде и всё (и в ручном и в авторежиме). На сайте автора, кстати, о том же самом люди в комментариях отписываются: НЕ РАБОТАЕТ в Опере и Сафари. Жаль. Отличный слайдер.
    • 22 Марта 2012 09:17
      Guslik
      Причём здесь опера? Если только дописать:"Моя опера впереди всех." Тогда только у тебя и не работает.
    • 23 Марта 2012 16:02
      PHP CODER
      yes man I agree w u
  • 21 Марта 2012 10:42
    SskrollY
    спасибо )давно уже такой искал
  • 21 Марта 2012 16:23
    jurii2
    отлично, а откуда такие перлы в примере?
  • 22 Марта 2012 08:05
    ZEWSOFF
    отличный слайдер для сайта
  • 24 Марта 2012 11:42
    Евгений Романенко
    Спасибо, урок понравился. Рекомендую настроить "bgincrement: -50", движение фона в ту же сторону, в которую и слайды, будет более естественно для глаза.
  • 24 Марта 2012 13:09
    igorezhkov
    В IE tester в семерке вообще не работает - полосы прокрутки показываются
  • 25 Марта 2012 18:01
    stylish_ass
    .da-slide-fromright p{ animation: fromRightAnim2 0.6s ease-in 0.8s both; ПОдскажите пожалуйста, что означают вот эти команды, русским языком?:) fromRightAnim2 0.6s ease-in 0.8s both ???
  • 28 Марта 2012 16:50
    Leonheart
    Cердечное С П А С И Б О, давно ищу!
  • 1 Апреля 2012 15:01
    dotamovie
    Спасибо! Скажите как выставить ссылки на соответствующий слайд? Спасибо заранее за ответ
  • 3 Мая 2012 22:31
    clubxaliav
    А почему в демо в автоматическом режиме после 15-18 прокрутки пропадает фон?
  • 9 Июня 2012 18:00
    АлексейЮрьевич
    Привет.. Каким образом можно уменьшать скорость движения background в .da-slider??? Хочу, что бы оно сдвигалось на 50-200 пикс, а не прокручивалось 4 раза!
  • 11 Июня 2012 18:44
    АлексейЮрьевич
    Привет, могли бы вы ответить на пару вопросов, по поводу этого слайдшоу? 1. В демо просмотре беграунд (оранжевый фон) - в авто режиме прокручиваеться несколько раз картинка - а в том вар где надо "вручную" пролистывать - картинка просто смещаеться на 50пикс. Вопрос: как можно сделать так, что бы в автопросмотре картинка (бекграунда) не пролистывалась полностью, а смещалась на 50-100 пикс? 2. И вопрос 2: можно ли добавлять дополнительные слои с картинками и тестом, что бы увеличить количество двигающихся объектов? И как это можно сделать не влизая в файлы джаваскрипт и библиотеку джейкьюэри? Заранее спасибо)
  • 10 Сентября 2012 08:30
    mackay
    супер
  • 7 Октября 2012 09:47
    aka_GRAD
    Для того чтобы работало в Oper'е 12 в файле jquery.slider.js найдите строчку
    if( this.current === page || this.isAnimating ) return false;
    и замените на эту
    if( this.current === page ) return false;
  • 8 Октября 2012 06:27
    potatos
    aka_GRAD, низкий поклон тебе :) строчка заставляет оперу работать, но это снимает "защиту от дурака" - на стрелку быстро кликаешь, и надписи с изображениями начинают наслаиваться и тд.... PS а вообще урок - просто класс
  • 3 Ноября 2012 12:55
    gizol
    Большое спасибо! Очень красиво и эффектно! Но я пытаюсь втиснуть слайдер в свой проект, но не все получается. Я раздвинул текст и картинки, прижав их ближе к краю (в файле style2.css). Теперь картинка не "уезжает", а прыгает. Не могу найти, какие значения мне нужно поменять :(. Вот мой проект - http://1.svechi.biz/ (это заготовка :)). Не поможете? Буду очень признателен!
  • 3 Ноября 2012 14:38
    gizol
    Все, спасибо, решил. Просто изменил дизайн и вставил как есть...
  • 15 Ноября 2012 10:52
    neotim
    Почему пропадает фон после нескольких прокруток?
    • 3 Декабря 2012 14:32
      yerbol
      нашли решение? у меня тоже такая проблема
  • 27 Февраля 2013 22:20
    roman179
    Тоже была проблема с оперой - первый слайд пролистываается и все встает. Метод предложенный выше не устроил, поэтому стал рыть и нарыл, что если в css закомментить 8 строчку background: transparent url(/images/waves.gif) repeat 0% 0%; то опера 12.14 вклинивает после второго слайда. Там же в css везде webkit-ы, может они и клинят при смене цвета
  • 28 Марта 2013 00:44
    Enigma_Man
    Всем привет, кто подскажет как сделать на этом слайдере возможность переключения слайдов как на примере - (bb нет?) http://www.креативисты.рф , Весь нюанс в том что нужно перелистывать контент но как фото на примере или наоборот заставить пример листать контент. исходники примера - http://www.креативисты.рф/Desktop.zip
  • 13 Апреля 2013 22:17
    matyashev
    Вот за это спасибо!
  • 16 Мая 2013 11:44
    jurii2
    пропадает фон после нескольких прокруток, пользователь lothar, предлагает следующее: Заменить в jquery.cslider.js строку:
    this.$el.css( 'background-position' , this.bgpositer * this.options.bgincrement + '% 0%' );
    на
    this.$el.css( 'background-position' , ( (this.bgpositer * this.options.bgincrement > 4500) ? ((this.bgpositer * this.options.bgincrement)%4500) : (this.bgpositer * this.options.bgincrement) ) + '% 0%' );
    работает, проверено в firefox
  • 20 Мая 2013 19:20
    lexapashkov
    Не подскажите как сменить background кнопок? (внизу слайда и по бокам) Заранее спасибо!) урок просто класс!))
    • 11 Августа 2013 19:48
      kobyakovdima
      в css слайдера прописаны пути к рисункам кнопок
  • 3 Марта 2015 22:38
    artsanyok
    Слайдер отличный, разработчикам отдельная благодарность. Работает в хроме, опере и мозилле, эксплорер не проверял, и не хочу пробовать (а то начнет - обновите, установите и т.п.). Спасибо Русселеру за урок!
  • 2 Декабря 2015 10:08
    Grog2903
    Ребят, помогите пожалуйста, как сделать чтобы при перезагрузке страницы, слайдер запоминал текущее состояние и открывал тот слайд на котором произошла перезагрузка, а не начинал по новой крутить с первого слайда ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО
^ Наверх ^