Эффект пошатывания для элементов слайд-шоу

demosourse

Сегодня мы бы хотели поделиться с вами очередным экспериментальным скриптом, а именно слайд-шоу с эффектом пошатывания слайдов. За основу мы взяли работу GIF Exercise автора Sergey Valiukh, где ко всем элементам интерфейса применяется подобный эффект. Для достижения цели мы воспользовались Snap.svg и анимацией SVG элементов.

Напоминаем, что данные эффекты будут доступны только в последних версиях браузеров.

Набор бесплатных иконок, которые мы используем называется Ballicons 2.

Само слайд-шоу представляет собой обычный ненумерованный список, завёрнутый в блок с id и классом, принимающими значение slideshow:

<div id="slideshow" class="slideshow">
    <ul>
        <li>
            <div class="slide">
                <!-- ... -->
            </div>
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</div>

Мы вставляем SVG изображение в виде прямоугольника перед самим слайдом. Само SVG изображение выглядит следующим образом:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
    <path d="M33,0C33,0,74,0,74,0C74,0,69,9.871,69,29.871C69,49.871,74,60,74,60C74,60,32.666,60,32.666,60C32.666,60,32.541,60,32.541,60C32.541,60,6,60,6,60C6,60,1,50,1,30C1,10,6,0,6,0C6,0,33,0,33,0" />
</svg>

Три различных SVG формируют следующие фигуры:

Найти все SVG, которые мы используем можно в папке img.

В зависимости от того куда нам нужно передвигать слайд, будем изгибать изображение в ту или иную сторону. Это позволит нам создать необходимый эффект.

Сами фигуры определяем в параметрах слайд-шоу:

SliderFx.prototype.options = {

    // скорость (ms)
    speed : 500,

    // вид анимации
    easing : 'ease',

    // определение фигур
    paths : {
        rect : 'M33,0h41c0,0,0,9.871,0,29.871C74,49.871,74,60,74,60H32.666h-0.125H6c0,0,0-10,0-30S6,0,6,0H33',
        curve : {
            right : 'M33,0h41c0,0,5,9.871,5,29.871C79,49.871,74,60,74,60H32.666h-0.125H6c0,0,5-10,5-30S6,0,6,0H33',
            left : 'M33,0h41c0,0-5,9.871-5,29.871C69,49.871,74,60,74,60H32.666h-0.125H6c0,0-5-10-5-30S6,0,6,0H33'
        }
    }

}

А вот пример того, как мы осуществляем анимацию:

SliderFx.prototype._morphSVGs = function( callback ) {

    var self = this,
        speed = this.options.speed,
        pathCurvedLeft = this.options.paths.curve.left,
        pathCurvedRight = this.options.paths.curve.right,
        pathRectangle = this.options.paths.rect,
        dir = this.old < this.curr ? 'right' : 'left';

    // преобразуем текущее состояние svg изображения в "curved"
    this.items[ this.old ].path.stop().animate( { 'path' : dir === 'right' ? pathCurvedLeft : pathCurvedRight }, speed * .5, mina.easeout );

    // слайд появляется чуть позже...
    setTimeout(function() { callback.call(); }, speed * .2 );

    // меняем состояние svg для входящего слайда на "curved"
    var currItem = this.items[ this.curr ];
    currItem.querySelector('path').setAttribute( 'd', dir === 'right' ? pathCurvedLeft : pathCurvedRight );

    // меняем состояние svg изображения на "rectangle"
    setTimeout(function() { currItem.path.stop().animate( { 'path' : pathRectangle }, speed * 3, mina.elastic ); }, speed * .5 );

}

Самым важным в этом всём является аспект времени. К примеру, при анимации SVG из изогнутого состояния в прямоугольник, мы должны быть уверены, что этот процесс займёт наполовину больше времени, чем движение слайда (т.е. скорость * .5). Это гарантия того, что мы всё-таки заметим эффект перед тем как слайд исчезнет. Так же делаем небольшую задержку перед запуском смены слайда. Первоначальное состояние SVG изогнутое, но впоследствии мы меняем его на прямоугольное. Вы можете с лёгкостью сменить эффект “пошатывания” на эффект “пружины”. Поменяйте dir === 'right' на dir === 'left', чтобы увидеть разницу. Во время последнего преобразования SVG, мы можем поиграть с двумя параметрами: скоростью преобразования SVG и задержкой.

Вот код после небольших изменений:

// преобразуем текущее состояние svg изображения в "curved"
this.items[ this.old ].path.stop().animate( { 'path' : dir === 'right' ? pathCurvedLeft : pathCurvedRight }, speed * .7, mina.easeout );

// слайд появляется чуть позже...
setTimeout(function() { callback.call(); }, speed * .3 );

// меняем состояние svg для входящего слайда на "curved"
var currItem = this.items[ this.curr ];
currItem.querySelector('path').setAttribute( 'd', dir === 'left' ? pathCurvedLeft : pathCurvedRight );

// меняем состояние svg изображения на "rectangle"
setTimeout(function() { currItem.path.stop().animate( { 'path' : pathRectangle }, speed * 5, mina.elastic ); }, speed * .8 );

Больше о Snap.svg вы можете узнать на их сайте и на странице документации.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2014/10/24/wobbly-slideshow-effect/
Перевел: Станислав Протасевич
Урок создан: 27 Октября 2014
Просмотров: 7190
Правила перепечатки

5 последних уроков рубрики "HTML5"

  • Расширяем возможности HTML за счёт создания собственных тегов

    В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

  • Определение доступности атрибута HTML5 с помощью JavaScript

    Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

  • HTML5: API работы с вибрацией

    HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

  • Создание форм с помощью Webix Framework — 4 практических примера

    Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

  • Знакомство с фрэймворком Webix

    В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

^ Наверх ^