Эксперименты с CSS3 анимацией при создании слайдера

Главная

Статьи

Веб-программирование

19.12.2011 15:17

Эксперименты с CSS3 анимацией при создании слайдера

Сегодня мы хотим с вами поделиться некоторыми экспериментами с 3D image transitions, для этого мы будем использовать CSS3 анимацию и jQuery. К сожалению, CSS3 3D Transforms на данный момент хорошо работает только в браузере Safari.

Изображения, используемые в демо, Joanna Kustra.

Обратите внимание, что 3D-эффекты будут работать только в браузере Safari. Но если у вас этот браузер не установлен, то вы можете просмотреть видео о том, как эти эффекты выглядят:

Как это работает

Для нижеприведенного ряда изображений, мы добавим первое изображение в блок-обертку с классом te-cover. И с помощью JavaScript мы будем управлять классами переходов для данных элементов в блоке te-transition, в зависимости от того какое изображение будет показано. Итак, первый пример будет выглядеть так:

<div id="te-wrapper" class="te-wrapper">

 <div class="te-images">

 <img src="images/1.jpg"/>

 <img src="images/2.jpg"/>

 <img src="images/3.jpg"/>

 <img src="images/4.jpg"/>

 <img src="images/5.jpg"/>

 </div>

 <div class="te-cover">

 <img src="images/1.jpg"/>

 </div>

 <div class="te-transition">

 <div class="te-card">

 <div class="te-front"></div>

 <div class="te-back"></div>

 </div>

 </div>

</div>

Основная идея состоит в том, чтобы всегда показывать текущее изображения, используя класс te-cover. Когда мы начинаем анимацию, задавая соответствующий класс анимации, te-cover будет скрыт в то время когда анимация работает. Когда анимация заканчивается, элемента te-cover будет показан снова, с обновленным изображением.