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

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

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

Эксперименты с CSS3 анимацией при создании слайдера
Поделиться в соцсетях:

Обратите внимание, что 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 будет показан снова, с обновленным изображением.
Примеры

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

  • Пример 1: Flip
  • Пример 2: Rotate
  • Пример 3: Multi-Flip
  • Пример 4: Cube
  • Пример 5: Unfold
  • Пример 6: Others

Новый комментарий

Имя:
Для редактирования комментария осталось 10 минут
Комментарии отсутствуют