—»     —»   Parallax-слайдер контента на CSS3 и jQuery
  Раздел: Анимация   Комментариев: 8  

Parallax-слайдер контента на CSS3 и jQuery



Parallax-слайдер контента на CSS3 и jQuery


Сегодня мы хотим поделиться с вами простым примером Parallax-слайдера контента. Используя CSS animation, мы сможем управлять анимацией каждого отдельного элемента слайдера и создать Parallax-эффект посредством анимации фона самого слайдера.

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

Как это работает

Слайдер состоит из нескольких слайдов, в каждом из которых присутствует элемент h2, абзац, ссылка и отсек для изображения:

<div id="da-slider" class="da-slider">

<div class="da-slide">
<h2>Some headline</h2>
<p>Some description</p>
<a href="#" class="da-link">Read more</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>

Ядро данного слайдера заключается в анимации для каждого элемента. Мы будем управлять поведением элементов за счет классов направления для соответствующих слайдов. Например, когда мы будем прокручивать текущий слайд вправо, мы зададим ему класс «da-slide-toright». У нас будет 4 разных класса для каждого и возможных направлений слайдов.

.da-slide-fromright
.da-slide-fromleft
.da-slide-toright
.da-slide-toleft

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

/* Slide in from the right*/
.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;
}

/* Adjust animations for different behavior of each element: */
@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; }
}

Опции

При запуске плагина cslider, нам будут доступны следующие опции:

$('#da-slider').cslider({

current : 0,
// индекс начального слайда

bgincrement : 50,
// инкремент позиционирования фона
// (parallax-эффект) при скольжении

autoplay : false,
// слайд-шоу вкл. / выкл.

interval : 4000
// временная задержка между трансформациями

});

Parallax-эффект будет реализован за счет сдвига фона слайдера в обратном направлении скольжения слайдов. Посредством bgincrement мы можем управлять числом пикселей, на которое он будет сдвинут.

Демо-файлы

* Демо 1: Стандартные опции
* Демо 2: Слайд-шоу (различные анимации)

Учтите, что мы используем простенькую версию отката для браузеров, не поддерживающих анимацию и переходы в CSS (такие все еще встречаются).

Надеемся, что вам понравился наш сегодняшний эксперимент, и вы найдете ему применение!

Посмотреть демо | Скачать исходные файлы
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, jQuery, parallax
Опубликовал Design FactoRy   Прочитано (раз): 13969   |   Оставлено комментариев: 8
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 11 июня 2012 @ 17:38
Написал: alexdobdesign — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Привет, могли бы вы ответить на пару вопросов, по поводу этого слайдшоу?

1. В демо просмотре беграунд (оранжевый фон)
- в авто режиме прокручиваеться несколько раз картинка
- а в том вар где надо "вручную" пролистывать - картинка просто смещаеться на 50пикс.

Вопрос: как можно сделать так, что бы в автопросмотре картинка (бекграунда) не пролистывалась полностью, а смещалась на 50-100 пикс?


2. И вопрос 2: можно ли добавлять дополнительные слои с картинками и тестом, что бы увеличить количество двигающихся объектов? И как это можно сделать не влизая в файлы джаваскрипт и библиотеку джейкьюэри?

Заранее спасибо)
Комментарий #2: 11 июня 2012 @ 18:29
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
alexdobdesign,
По первому вопросу - все нормально работает. Возможно у вас браузер устаревший или не поддерживающий некоторые функции.

По второму: конечно можно. Внутрь блока с классом "da-slide" добавляете нужные элементы, а потом анимируете их в CSS.
Комментарий #3: 11 июня 2012 @ 19:26
Написал: alexdobdesign — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Design FactoRy, ну у меня стоит самый новых Хром...

и все тоже хорошо работает ....я наверное не верно выразился))

у меня вместо бекграунда оранжевого стоит панорама города длинной 2100пикс,
так вот она прокручивается по длине несколько раз (в авто-режиме), что и показано в демо версии - фон прокручивается...и при том быстро...

но мне интересное следующее, может вы подскажете, каким образом, я могу заменить несколько разовое прокручивание одной картинки, ее передвижением на заданное расстояние по длине например 200-300пикс.

Заменить прокрутку на передвижение??
Комментарий #4: 11 июня 2012 @ 21:21
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
alexdobdesign, попробуйте этот параметр поизменять - bgincrement : 50. Посредством bgincrement мы можем управлять числом пикселей, на которое фон будет сдвинут.
Комментарий #5: 11 июня 2012 @ 22:29
Написал: alexdobdesign — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Design FactoRy, это пробовал...выставлял на 0, 100, 750, 1000, 10000...результат тот же....может есть еще какие то варианты??
Комментарий #6: 12 июня 2012 @ 14:51
Написал: alexdobdesign — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
И еще вот вопросик..

как изменить направление движения у одного элемента .da-link?

в бекграунде там --this.bgpositer направление можно поменять с помощью замены ++ на --.
Комментарий #7: 24 октября 2013 @ 08:05
Написал: Владимир — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Подскажите, пожалуйста, одну вещь. Очень нужно.
Как сделать, чтобы контейнер со слайдером (.da-slider) оставался по ширине 100%, а сами слайды (.da-slide) были с max-width, например, 60em и центрировались по середине? Сейчас же они тоже 100%.
Короче, чтобы проще было понять, вот картинка: http://www.imageup.ru/img146/1533564/29515921.jpg
Комментарий #8: 13 февраля 2016 @ 22:42
Написал: dimasik — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Подскажите пожалуйста, установил данный слайдер, показывает первый слайд и все, дальше не листает, точки слайдов не определяет...(ни одной серой точки нет), в чем дело может быть? куда копать? если отключить стиль, то все 4 слайда отображаются по порядку...
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930