Как да направите въртяща се 3D снимка на елемент в HTML5
Сценарият е много прост: той „превърта“ поредица от снимки в един и същ прозорец, една след друга. Защото всички снимки представляват фазите на въртене на един обект около оста, тогава ще видим въртящ се обект. За да получите ефекта на въртене, просто щракнете с курсора на мишката върху изображението и преместете курсора наляво-надясно.
1. Преди да започнете
За да бъде въртенето приятно и равномерно, обектът трябва да се снима в различни фази (ъгли) на въртене с пълно завъртане на 360 градуса. Можете да получите правилната последователност от изображения на обект в ротация, като използвате специален грамофон за 3D фотография.
2. Подготовка на изображения
Намалете заснетите серии от снимки до същия малък размер, в съответствие с дизайна на вашия сайт. Например до 500 точки на дългата страна. Всички снимки от поредицата са с еднакъв размер. Препоръчваме ви да обработвате изображения с програма, която поддържа групова обработка (програмата обработва цялата серия изображения наведнъж, това е много удобно). Запазете снимки в JPEG формат: поради компресирането файловете са малки и колкото по-малки са файловете, толкова по-бързо ще се зареди въртящото се изображение на вашия уебсайт.
Ако нямате програма за групова обработка на изображения, можете да намерите и изтеглите безплатни програми в Интернет, например:
ImBatch - може бързо да конвертира формат, преоразмеряване, завъртане, воден знак (лого), преименуване и изпълнение на други задачи с един проход.
XnConvert - преоразмеряване, завъртане, изрязване, добавяне на воден знак или текстов надпис, автоматично регулиране на нивата и контраста, коригиране на цвета, конвертиране в друг формат и преименуване.
FastStone Photo Resizer - програмата може да конвертира файлове и да ги преименува. Допълнителни функции: преоразмеряване на изображения, завъртане, изрязване, преоразмеряване на платното, яркост, контраст, изостряне, вмъкване на воден знак (лого).
Photopus - преоразмеряване, завъртане, коригиране на нива, контраст, цветове, конвертиране в друг формат и преименуване (но безплатната версия няма вмъкване на лого).Fotosizer - ви позволява бързо да намалите размера на снимките, по време на обработката може да се извърши конвертиране в определен формат.
Moo0 ImageSizer - много проста програма за преоразмеряване на изображения.
PIXresizer - лесен за употреба интерфейс, конвертиране и преоразмеряване на изображения.
Номерирайте файловете с изображения последователно: 01.jpg, 02.jpg, 03.jpg,. и така нататък, в зависимост от броя показвания. Ако вашата пакетна програма не поддържа автоматично преименуване, можете да изтеглите и използвате безплатната програма Преименуване на главен или друг подобен. Моля, обърнете внимание: всички изображения трябва да бъдат номерирани с две цифри, не 1.jpg, а 01.jpg и т.н.
В този пример използваме 36 изображения. Можете да конфигурирате сайта си на произволен брой ъгли, до 99 (и повече).
3. Разположение на папки с файлове на сайта
Всяка html страница, показваща въртящо се изображение (например, посветена на един конкретен продукт), ще се намира в отделна папка на вашия сайт. В същата папка ще копирате всички подготвени снимки на този продукт. Ако назовете всички папки по номера на артикули или по техните имена, тогава ще ви е по-лесно да навигирате сред многобройните папки на уебсайта на вашия магазин.
В резултат получаваме: всяка html страница с въртящо се изображение е в отделна папка заедно с всички изображения, свързани с това въртящо се изображение. Например в папката odekolon има 36 снимки и файл rolik.htm: