Интерактивное вращение на JavaScript: готовое бесплатное решение для вашего сайта

Владельцам интернет-магазинов и фотографам: вращающиеся изображения товаров на сайте и живые портреты 360°. Скачивайте и применяйте без оплаты!

Пример простого скрипта для вращения фотоизображения на 360°. Рекомендации и html-шаблоны

Для применения этого инструмента вам не обязательно знать программирование и иметь навыки веб-дизайна. Достаточно взять готовые шаблоны и адаптировать их для ваших задач.

Скрипт вращения устроен очень просто: он "прокручивает" серию фотоизображений в одном и том же окне, друг за другом. Т.к. все фотоизображения представляют собой фазы вращения одного объекта вокруг оси, то мы увидим вращающийся объект. Для получения эффекта вращения достаточно нажать на картинку курсором мыши или пальцем на смартфоне, и сдвигать влево-вправо. Аналогично и на тачпаде ноутбука.

Работает в браузерах: Chrome, Firefox, Opera, Safari, Edge, IE, Yandex.

Недостаток скрипта: нет функции управляемого масштабирования картинки (зума).

Последовательность действий на схеме:

1. Перед началом работы

Чтобы вращение получилось красивым и равномерным, предмет должен быть отснят в разных фазах (ракурсах) вращения с полным оборотом на 360 градусов.

Фотосъемка
Получить правильную последовательность изображений предмета во вращении вы сможете с помощью специального поворотного стола для 3D фотосъёмки.

Если вы фотографируете камерой смартфона или планшета на Android, то для съемки предметов на поворотном столе рекомендуем вам приложение Open Camera. Приложение позволяет вести съёмку серий кадров в автоматическом режиме с дистанционным управлением голосом или другим звуком, не касаясь устройства в процессе съёмки. Приложение Open Camera доступно бесплатно на Google Play.

Видеосъемка
Можно отснять короткое видео вращающегося предмета на поворотном столе для видео 360° и получить серию JPEG изображений.

Для получения серии JPEG из видеофайла существуют программы-конвертеры, например, Free Video to JPG Converter.

Предварительно вам потребуется обрезать видеофрагмент до одного оборота, убрав лишнее. При конвертации видео в JPEG выберите режим фиксированного количества фотоизображений, и тогда программа разобьёт оборот предмета на определённое число кадров, независимо от продолжительности видеофрагмента. Удобно делать серии из 50 кадров - вращение получается достаточно плавным, и как раз есть готовые HTML шаблоны на 50 кадров.

2. Готовим изображения

Отснятую серию фотографий желательно уменьшить до одинакового небольшого размера, в соответствии с дизайном вашего сайта. Например, до размера 400 точек по длинной стороне. Для всех фотографий в серии - одинаковый размер. Удобно применять программу, поддерживающую пакетный режим обработки. Обрабатывается сразу вся серия изображений, обработка одинаковая для всех картинок. Сохраняйте фотографии в формате JPEG: за счёт сжатия файлы получаются небольшие, быстрее будет загрузка с сайта.

Различные программы для пакетной обработки изображений вы можете найти и скачать в интернете. Например PhotoScape - легкая в работе, интуитивно понятная и бесплатная программа. Имеет много режимов обработки изображений. Применяется также для создания GIF анимации.

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

Теперь пронумеруйте файлы изображений последовательно: 1.jpg, 2.jpg, 3.jpg, ... и так далее, в зависимости от количества отснятых ракурсов. Ещё удобнее автоматическое переименование файлов, например, средствами Windows (групповое переименование файлов) - так получается быстрее и без ошибок.

Для корректного группового переименования файлов средствами Windows поместите всю серию фотоизображений в отдельную папку. Выделите все файлы клавишами 'CTRL/A' или через меню 'Правка/Выделить все', и нажмите клавишу F2 (или правой кнопкой мыши ('Переименовать'). Курсор выделит первый файл в списке и предложит вам изменить имя файла (задать префикс). Введите только один символ дефис '-', и нажмите 'Enter'. Система автоматически переименует файлы '- (1), - (2), - (3)' и так далее. В качестве префикса везде будет стоять дефис.

Дефис удобно использовать, т.к. он не зависит от языковой раскладки клавиатуры, и на стандартной клавиатуре он в правом верхнем углу. Без префикса автоматическое переименование может подставить перед номерами пробел, а при последующем копировании файлов пробелы могут произвольно удаляться. Такой глюк Windows, вызывающий затруднения у пользователей. Ведь если изменяются имена файлов, изображения перестают отображаться скриптом вращения. Поставленный впереди дефис защищает от этой неприятности.

Вы можете использовать при групповом переименовании любой другой удобный для вас символ, но только обязательно внесите соответствующие коррективы в файл-шаблон.

В данном примере мы используем 36 изображений и простую нумерацию файлов от 1 до 36. Но вы сможете в дальнейшем использовать любое другое число ракурсов (после небольших настроек), а также применить автоматическую нумерацию Windows.

3. Расположение папок с файлами на сайте

Каждая html-страница, показывающая вращающееся изображение (например, посвящённая одному конкретному товару), будет находиться в отдельной папке на вашем сайте. В папку jpeg/ уровнем ниже вы скопируете все подготовленные фотографии данного товара.

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

В результате получаем: каждая html-страница с вращающимся изображением лежит в отдельной папке вместе со служебными файлами javascript, а в подпапке jpeg/ лежат все картинки, относящимися к этому вращающемуся изображению.

Например, в папке odekolon-312/:

Файл index.html - это html-страница с вращающимся изображением.
Файлы image360.jquery.js и jquery-1.12.0.min.js - служебные, содержат программный код на javascript.
В подпапке jpeg/ лежат 36 фотографий.

Такое расположение файлов позволит вам использовать одинаковые html-страницы для разных товаров. Только картинки в соответствующих подпапках будут разные. Упрощается ваша работа.

В файле index.html задан размер изображения. В разделе <style> параметр max-width определяет максимальную ширину картинки - это и будет текущий размер изображения на экране. Например:

Если изображение имеет ширину больше 400 пикселей, оно будет автоматически уменьшено до 400.

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

Вы cможете открыть файл для редактирования (например, стандартной программой Блокнот/Notepad), изменить этот параметр под дизайн вашего сайта, и сохранить изменения. Только не используйте для редактирования Microsoft Word.

Посмотрите примеры вращения с уже готовыми фотоизображениями. Ссылка для скачивания:
templates360.zip

Скачайте архив, распакуйте его. Примеры работающего вращения находятся в папках:
primer (1,2,3) left/
primer (1,2,3) right/
primer (windows rename) left/
primer (windows rename) right/

Вариант right лучше использовать, если съёмка была сделана с вращением по часовой стрелке (вправо), а вариант left - против часовой стрелки (влево).

В папках primer (1,2,3)/ дважды щёлкните на файл index.html, и в открывшемся окне браузера вы увидите изображение флакона, которое можно вращать мышью. В подпапке jpeg/ сложены 36 фотоизображений флакона во всех ракурсах его вращения.

В папке primer (windows rename)/ находится аналогичный набор файлов, только там нумерация файлов изображений в подпапке jpeg/ сделана автоматическим переименованием Windows.

Флакон в этих примерах был отснят с вращением вправо, поэтому вариант right смотрится нормально, а вариант left - странно.

Применяйте для ваших проектов тот или другой вариант (left или right), в зависимости от направления вращения при съемке.

4. Быстрая вставка с помощью <iframe>

Очень удобно вставлять вращающиеся изображения на страницы вашего сайта с помощью простого html-тега <iframe>. В этом случае картинка "подгружается" на вашу страницу из другого файла, и в нужном месте вы получите окно с изображением.

Например, вот так вставляется изображение из файла index.html на страницу сайта:

<iframe src="example360/index.html" width="300" height="360" align="middle" scrolling="no" frameborder="1"></iframe>

Получается окно с размерами 300х360 точек, в тонкой рамке, а в окне - вращающееся изображение (вращайте мышью или пальцем):

Если рамка не нужна, установите параметр frameborder="0", и вращающееся изображение будет вставлено без рамки:

5. Готовые шаблоны для скачивания

Для вашего удобства сделан набор готовых шаблонов - это файлы html, уже настроенные на разное количество ракурсов вращения: 32, 36, 48, 50, 64, 72, 96, 100. Шаблоны также находятся в архиве templates360.zip.

Наборы шаблонов лежат в папках html:
html (1,2,3)/
html (windows rename)/

1,2,3 - здесь шаблоны для показа изображений с простой нумерацией 1, 2, 3 и т.д.
windows rename - здесь шаблоны для показа изображений с нумерацией, сделанной групповым переименованием Windows - (1),- (2),- (3) и т.д.

В папке html/ выберите подходящий для вас html-шаблон, и затем просто подставьте его в папку primer/ на место прежнего. В подпапку jpeg/ вы перенесёте ваши фотоизображения. Количество фотоизображений и их нумерация должны соответствовать выбранному вами шаблону. Если вращение не работает, значит допущена ошибка с нумерацией, или файлов меньше, чем надо.

Размер изображения настраиваемый. Лучше выбрать один единый размер крутящихся изображений для всего вашего сайта, и в дальнейшем не потребуются коррективы. Для показа товаров разной формы может быть удобен квадрат с размерами 400х400, 500х500 пикселов и т.д. - они все будут нормально смотреться (и вращаться) в квадрате.

Итак, вы отсняли и подготовили серию изображений вашего предмета с нужными вам размерами. Что делать дальше? Скопируем ваши изображения в папку primer/jpeg/ на место прежних картинок. Настроим html-шаблон под размер вашей картинки. Для этого возьмем файл index.html из соответствующей папки html/ (32, 36, 48, 50, 64, 72, 96, 100), скопируем его в папку primer/ и отредактируем. Используем стандартную программу "Блокнот" (Notepad, WordPad). Не используем Microsoft Word!

В разделе <style> вы найдёте параметр max-width - он задаёт ширину (и вообще размеры) окна с вращающимся изображением. Ширина указывается в пикселах. Измените эту цифру на нужную вам, например, max-width: 500px; и сохраните файл. Больше никаких изменений в файл не вносите. Поместите отредактированный html-файл в папку example360/ - замените лежащий там старый index.html.

Теперь крутящаяся картинка будет показываться с шириной, заданной вами. Если ширина исходной картинки будет отличаться, браузер постарается привести картинку к заданному размеру, сохраняя пропорции. Осталось только загрузить полученные материалы на ваш сайт.

А если по количеству ракурсов вам не подходит ни один из готовых шаблонов, вы можете дополнительно отредактировать файл index.html: в разделе <div id="rotation"> удалить последние строки списка (сохраняя на месте тег </div>). Или наоборот, добавить в конец списка несколько однотипных строк с увеличивающимися номерами файлов jpg, например, из 36 сделать 40:

В случае затруднений с применением данного скрипта или ошибок в его работе, сообщите нам пожалуйста по адресу: addspace@inbox.ru

Можно ли сделать проще?

Можно просто снять видео вращающегося объекта, зациклить это видео и получить аналогичный результат. Вращение на видео выглядит более плавным. Один видеофайл mp4 обычно весит меньше, чем серия фотоизображений JPEG. Но такое вращение уже не будет управляемым!

Пример зацикленного видео:

Подробнее о видео 360° с непрерывным вращением

Короткие видео

Короткие "живые" видеоролики с бесконечным движением тоже отлично показывают ваш товар. Вращение объекта неполное, но выразительное.

Короткие видео делать намного проще, и файлы получаются меньше.

Подробнее о коротких видео

Другие способы получения вращающихся 3D изображений

Общие рекомендации: способы получения крутящихся изображений, съемка, освещение, софт и т.д.

3D съемка предметов смартфоном с помощью Open Camera

Анимация вращения из серии фото:

- GIF анимация онлайн

- GIF анимация из фотографий бесплатной программой PhotoScape

- GIF анимация программой UnFREEz

- HTML5 анимация программой Object2VR

- HTML5 и GIF анимация программой 360° Product Viewer

Анимация вращения из видео:

- GIF анимация из видео программой ThunderSoft Video to GIF Converter

- GIF анимация бесплатной программой Free Video to GIF Converter

- GIF анимация из отснятого видео онлайн

- Управляемое вращение из видео (Free Video to JPG Converter + HTML5)

Бизнес для вас!

Для удобства фотосъемки предметов в разных фазах (ракурсах) вращения предлагаем вам специальное оборудование:

Поворотные столы для съемки 360

Аккуратно и качественно сфотографировать предметы во вращении помогут вам специализированные поворотные столы для 360° фотосъемки:

Нужна консультация по поворотному столу? Ответим на ваши вопросы:

Другие виды нашей продукции

Напольные поворотные платформы

Детали для сборки поворотных подиумов большого диаметра

Крутящийся центр стола Lazy Susan. Вращающийся столик-подставка для блюд и тортов

Сделать крутящийся центр стола своими руками? К вашим услугам детали для самостоятельной сборки