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

Последние комментарии

Автор → ewok
в новости → Мини-чат v3.2 by TRANE73 для uCoz

Автор → Richardssics
в новости → Как настроить вайфай на компьютере ...

Автор → Donaldahag
в новости → Как настроить вайфай на компьютере ...

Автор → Jarvissgox
в новости → Как настроить вайфай на компьютере ...

Автор → Ruslaniys
в новости → Музыкальный шаблон для ucoz

Это интересно

Архив материалов » load » Скрипты для 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
  // Время показа слайда

});

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

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

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

Ссылка:
BB-code:
HTML:

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.