Демонстрация плагина jQuery Reel

Обзор объекта

Автор: © Petr Vostřel

Используем спрайт

{ speed:        1,
  opening:      1,
  frame:        3,
  delay:        3,
  directional:  true }

/*
  `speed` 1 означает один оборот в секунду (1 Hz).
  Анимация начинается после 1 секунды `открытия` и 
  и 3 секунд задержки.
*/
Автор: © Erik Kluka

Спрайт для вращения по часовой стрелке

{ speed:   -0.3,
  frames:  35,
  cw:      true }

/*
  В отличие от другого примера с машиной
  Формулы 1 данный спрайт организован для 
  вращения по часовой стрелке.
*/
Автор: © Erik Kluka

Спрайт без анимации

{ frames:  35,
  opening: 2,
  entry: 1 }

/*
  Данный пример не имеет полной анимации,
  только 2 секунды `открытия`
  со скоростью 1 Hz.
*/
Автор: © Petr Vostřel

Многострочный спрайт

{ speed:    0.3,
  frames:   6,
  footage:  3,
  rows:     3,
  row:      2 }

/*
  В дополнение используется класс "bordered"
  (прерывистая обводка) вокруг изображения.
*/
Автор © Matt Smith

Многострочная последовательность

{ frames:  20,
  frame:   14,
  rows:    6,
  row:     3,
  speed:   0.3,
  path:    'samples/mini/',
  images:  mini_frames() }

/*
  Вспомогательная функция `mini_frames`возвращает
  массив имен файлов
  [ '001.jpg',
    '002.jpg',
    ..
    '120.jpg' ]
*/

Последовательность для двух плоскостей

{ footage:  10,
  cw:       true,
  orbital:  3,
  inversed: true,
  speed:    0.7,
  path:     'samples/phone/',
  images:   phone_frames(20) }

/*
  Вспомогательная функция возвращает `phone_frames`
  простоф массив имен файлов
  [ '01.png',
    '02.png',
    ..
    '19.png' ]
*/
Автор: ©Petr Vostřel

Простая последовательность

{ speed:   2,
  delay:   1,
  path:    'samples/badge/',
  images:  [ 'badge-1.gif',
             'badge-2.gif',
             'badge-3.gif',
             'badge-4.gif' ] }

/*
  `delay` определяет задержку в 1 секунду
  перед запуском проигрывания
*/
Автор © Mark Leidman

Последовательность кадров

{ cw:      true,
  frame:   32,
  speed:   -0.2,
  path:    'samples/drone/',
  images:  drone_frames() }

/*
  Вспомогательная функция `drone_frames`возвращает
  простой массив имен файлов
  [ '00001.png',
    '00006.png',
    '00011.png',
    ..
    '00179.png' ]
*/

Панорамы

Автор © Petr Vostřel

Сшитая панорама

{ frames:   32,
  footage:  4,
  speed:    0.1 }

Линейная панорама

Автор: © Tom Nguyen

Управляется движениями мыши

{ stitched:   1821,
  frames:     60,
  frame:      23,
  speed:      -0.05,
  clickfree:  true }
Автор: © Greg Miernicki

Не замкнутая панорама

{ stitched:  1072,
  loops:     false,
  steps:     30,
  step:      15,
  speed:     -0.1,
  timeout:   1 }