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

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

 

Как устроена страница?

Слайдер содержит несколько слайдов, в каждом размещается элемент h2, абзац и элемент div с изображением.

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

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

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

 

Опции

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

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

Эффект  параллакса создается смещением фона в направлении обратном движению слайда. Параметр bgincrement позволяет управлять эффектом.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/R-j6R2tV-Rc/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Слайдер с эффектом параллакса | | 2012-06-19 11:59:17 | | Статьи Web-мастеру | | В данном уроке рассматривается построение слайдера для блоков содержания с эффектом параллакса. С помощью анимаций CSS мы можем контролировать каждый элемент на слайде и создавать поразительные | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: