Вращающееся изображение на сайте

Пример вращающегося изображения.

С помощью библиотеки jQuery Reel объект на изображении можно заставить вращаться. Вращение можно организовать вокруг вертикальной и горизонтальной оси. Объект может вращаться как сам по себе так и с помощью мыши.

Далее будет описано как создать изображение с объектом вращающемся вокруг вертикальной оси.

Сперва требуется создать некоторое количество изображений объекта под разными углами. Изображения должны иметь одинаковую высоту и ширину.

Затем объединить все изображения в коллаж. Например:

image-reel(485x254)

Порядок изображений в коллаже: слева направо и сверху вниз.

Библиотека предоставляет возможность обойтись без коллажа, но этот способ здесь не рассматривается.

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

  • image-001.jpg
  • image-002.jpg
  • image-003.jpg
  • и т.д.

Последовательность нумерации должна совпадать с последовательностью вращения.

ImageMagick предоставляет консольную утилиту montage для склейки изображений. Чтобы ей воспользоваться, следует запустить консоль (командную строку), перейти в папку с изображениями и выполнить команду:

montage *.jpg -geometry 485x254 collage.jpg

где:

  • *.jpg — указывает, что требуется объединить все изображения с расширением jpg в данной папке. Вместо этого можно просто перечислить изображения через пробел: image-001.jpg image-002.jpg image-003.jpg и т. д.
  • 485x254 — размер исходных изображений в пикселях (ширина x высота). Если указать другой размер, то каждое изображение будет отмасштабировано до указанного размера. Далее значения ширины и высоты будут использованы в html-коде.
  • collage.jpg — коллаж, итоговое изображение.

Чтобы встроить вращающееся изображение в html-страницу, следует воспользоваться следующим кодом:

<html>
  <head>
    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="//code.vostrel.cz/jquery.reel.js"></script>
  </head>
  <body>
    <img src="image-001.jpg" width="485" height="254"
      class="reel"
      data-image="collage.jpg"
      data-frames="24"
      data-footage="6"
      data-revolution="800">
  </body>
</html>

В <head> подключается библиотека jQuery и плагин Reel. В <body> изображение добавляется стандартным способом с помощью тега <img>. С помощью атрибута src указывается изображение, которое будет отображаться пока библиотека или коллаж не загрузились, а также если что-то пошло не так и вращение не заработало.

Другие атрибуты:

  • width="485" — ширина одного изображения в коллаже.
  • height="254" — высота одного изображения в коллаже.
  • class="reel" — связь с библиотекой.
  • data-image="collage.jpg" — коллаж.
  • data-frames="24" — количество изображений в коллаже.
  • data-footage="6" — количество изображений по горизонтали.

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

-->
X
Обратный звонок