0000

Sprite Sequences Viewer

После появления модулей на flash, в которых можно было вращать товары на сайтах, возникла идея написать свое решение. Несколько убого вышло, да и когда доделал, в сети появился удобный сервис Global Gallery, правда есть отличия на момент написания статьи:

  1. В моем скрипте используется спрайт из секвенции.
  2. Нет ограничений на минимальный/максимальный размер картинки(главное чтобы сам спрайт смог загрузиться).
  3. За счет дополнительных рядов секвенции появляется возможность свободного варьирования угла шарового сектора.
  4. Нет ограничений на соотношения сторон
  5. Не фиксированная ось вращения. Теоретически, даже количество осей вращения может появиться больше двух.
  6. Отсутствие анимирования зацикленной анимации
  7. Отсутствие полноэкранного режима
  8. Отсутствие необходимости использования тега iframe.

Вариант с Global Gallery:

Мои варианты:

1. По размерам кадра секвенции

2. В 2 раза меньше

3. Вертикальный вариант

4. Горизонтальный вариант

Еще он не зависит от сбоев flash-плагина.

err

Скрипт использует атрибуты data-section-heightdata-section-widthdata-width-amountdata-height-amount и data-image. С помощью значений первый двух атрибутов нужно указать высоту и ширину кадра секвенции, с помощью третьего и четвертого — количество строк и столбцов в спрайте, ну и с помощью последнего — местоположение самого спрайта. Для наглядности пример:

<div class="item" data-section-height="360" data-section-width="360" data-width-amount="36" data-height-amount="4" data-image="image001.jpg"></div>

И в header’е подключить сам скрипт. Все готово.

Единственное, что гораздо проще теперь загрузить 3D-модель на любой сайт (например: тот же SketchFab) и она будет занимать гораздо меньше места, чем растровый спрайт. Не говоря уже о том, что это гораздо удобнее всем=)