Rss
Site-Best.net Адаптация шаблона под uCoz manucoz
Поиск на сайте Расширенный поиск
ПОДДЕРЖАТЬ ПРОЕКТ Prog-rami.3de.ru   Yandex.Money:4100115189866119
Ваш Ip адрес: 216.73.216.35

Название сайта!

Главная » Статьи » Всё для 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
  // Время показа слайда
   
});

Категория: Скрипты для ucoz | Добавил: Alexander218 (04.04.2013)
Просмотров: 400 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Навигация
Всё для uCoz
Популярное...
Статистика
Top.Mail.Ru http://catcut.net/friend/39913
Block title
Всё Для minecraft
Block title
Всё для Cs 1.6
Всё Для сервера CS 1.6
Подняться наверх страницы
О проекте Новости сайта Правила сайта Правообладателям Контакты

softucoz.com - ucoz шаблоны и скрипты, freestorrent.com - торрент трекер, softdle.com - всё для DataLife Engine, forwebz.com - всё для вебмастера
Сайт создан в системе uCoz