Главная » Скрипты для ucoz » Слайдера для ucoz

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


В данном уроке рассматривается построение слайдера для блоков содержания с эффектом параллакса. С помощью анимаций 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
  // Время показа слайда
   
});



Источник |  Автор: Reflex | Категория: Слайдера для ucoz | Добавил: TheStorey | Дата: 11.10.2012
Скачать Слайдер с эффектом параллакса с сервера
2433_demo_1400.zip Размер: 686.9 Kb (cкачиваний: 244)
Посмотреть демо Слайдер с эффектом параллакса
Слайдер с эффектом параллакса(посмотрели: 6103)

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

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

Ссылка:
BB-code:
HTML:
3 | pirat пишет: | 03.04.2013 | 20:36 Страница с комментарием |
а как усыновить? то можно по подробнее что в css и.т.д
+ (0) -