Я хочу рассказать вам, как на своем сайте сделать вращение объекта.
Здравствуйте, на многих интернет магазинах есть такая штука, как 3D товара. Курсором мыши Вы можете посмотреть на объект со всех сторон, тем самым оценить внешний вид во все 360 градуса. Плагинов для такого эффекта на jquery немного и все они обладают как преимуществами, так и существенными недостатками. Для меня была задача реализовать вращение так, чтобы:
1. оно вращалась автоматически при загрузке страницы;
2. можно было вручную вращать объект;
3. были кнопки управления.
UPD> обратите внимание, что это статья 2015 года, я уверен, что сейчас гораздо больше выбор готовых решений и библиотек под эту задачу.
Для меня выходом стала библиотека treesixty.js. Но вначале об основах. Я думаю очевидно, что любой плагин или библиотека не смогут сами "дорисовать" объект. Вам в любом случае потребуется n-количество изображений со всех сторон. По сути все библиотеки работают одинаково. Позволяют курсором мыши "перематывать" кадры-изображения. Иными словами, вы указываете сколько у вас фотографий, плагин их подгружает и курсором мыши (кнопками управления) вы по сути просматриваете предыдущее или последующее изображение, наподобие анимации во флеш. Чем больше будет у вас таких кадров, тем плавней анимация, но и больше вес сайта.
Почему именно treesixty? Во-первых гибкость. Вы можете задать автоматическое вращение, можно задать "показ" элементов управления. Во-вторых из всех здесь самая плавная была, почему то, анимация. Из минусов: вам нужно четко указать в init количество фреймов, размеры и сами изображения должны быть 1.jpg (расширение тоже можно указать), 2, 3, 4 и т.д.
Чтобы вращение стартовала автоматически, необходимо к функции вызова добавить play();
Теперь посмотрим на практике.
window.onload = init;
var para; //задаем имя переменной
function init(){
para= $('.para').ThreeSixty({ //запускаем в слое с классом .para
totalFrames: 30, // количество изображений
endFrame: 30, // конечное число анимации
currentFrame: 1, // с какого изображения начинать вращение
progress: '.spinner', //имя слоя где будет индикатор прогресса загрузки
imagePath:'images/360/', // путь к изображениям
ext: '.jpg', // расширение файлов
height: 292, //высота
width: 520, //ширина
navigation: true, //отображать панель управления
drag: true, //разрешить мышкой вращать
disableSpin: true
}).play(); //запускать сразу после инициализации
}
Понятное дело, что вначале мы должны подключить библиотеку и jquery
Очень полезная вещь особенно тем, у кого объекты получаются путем рендера в программах 3д графики. Там можно автоматически получить сколь угодно кадров, не трудясь с фотографированием. Я думаю Вам понравилось. Скачать можно на сайте библиотеки. treesixty.js
UPD> обратите внимание, что это статья 2015 года, я уверен, что сейчас гораздо больше выбор готовых решений и библиотек под эту задачу. Но спасибо, за внезапные переходы. И еще момент, у многих CMS есть свои компоненты.
