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

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

<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 - при движении налево

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

Code

/* Выскальзывание слайда справа */
.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; }
}


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

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

  Просмотров: 8030 | Категория: Слайдера для ucoz | Добавил: NA

Другие новости


Поделиться ссылкой


Ссылка:
BB-code:
HTML:
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Den4ikus пишет: | 28 февраля 2013 09:14
А где архив со слайдом?
IFIR пишет: | 12 марта 2013 10:55
Выше!
pirat пишет: | 3 апреля 2013 19:36
а как усыновить? то можно по подробнее что в css и.т.д