Эффект вращения изображений на 360 градусов | RUDEBOXЕсли перед вами встала задача реализовать эффект вращения изображения на 360 градусов то вам будет полезен следующий плагин jQuery. Threesixty — достаточно универсальный плагин который позволяет достичь эффект вращения изображений под любым углом. Такие эффекты вращения стали весьма популярны в интернет-магазинах, ведь позволяют дать полное представление о товаре. Кроме этого плагин является кроссбраузерным, а это весьма упрощает жизнь при разработке.

Демонстрации приведен один пример реализации эффекта, в исходниках можно найти еще несколько интересных эффектов с элементами управления. И так, давайте приступим.

Шаг 1. HTML

Нам необходимо создать классы, которые будут отвечать за вызов необходимой нам информации, кроме этого мы добавим спаны в которых будет заключены обозначения о загрузке всех изображений. Картинки будут загружаться все одновременно, так как их достаточно много, это может занять некоторое время:

С разметкой мы разобрались, давайте перейдем к следующему шагу.

Эффект вращения изображений на 360 градусов | RUDEBOX

Шаг 2. CSS

Так как основную работу будет выполнять плагин, нам стили необходимы только для оформления контейнера и его базовых параметров:

Шаг 3. JS

Для правильной работы эффекта нам необходимо подключить и инициализировать плагин threesixty.js, кроме этого мы укажем дополнительные параметры при инициализации:

Плагин достаточно гибкий, как мы уже говорили раннее, по этому он имеет набор весьма интересных настроек:

  • totalFrames:180, — число — общее количество кадров используемых при повороте на 360 градусов
  • currentFrame:1, — число — устанавливаем стартовый кадр при инициализации
  • endFrame:180, — число — указываем последний кадр для автоостановки
  • framerate:60, — число — число кадров для анимации
  • filePrefix:», — строка — указываем префикс для файлов.
  • ext:png, — строка — расширение для всех файлов используемых в слайдере
  • height:300, — число — высота для контейнера со слайдером
  • width:300, — число — ширина для контейнера со слайдером
  • style:{}, — объект — контейнер со стилями для предзагрузки
  • navigation:true, — логическая переменная — установите false, чтобы не показывалась навигация по умолчанию
  • autoplayDirection:1, — число — направление вращения, может быть 1 или -1
  • dragging:true, — логическая переменная — укажите false, если хотите отключить мышь на слайдере

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.