Jquery Плагін для 3D обертання об’єкта - Куточок spoOky

обертання

Jquery Плагін для 3D обертання об'єкта

  • розмір шрифту зменшити розмір шрифтузбільшити розмір шрифту
  • Друк

Доброго дня, на багатьох інтернет магазинах є така штука, як 3D товару. Курсором миші Ви можете подивитися на об'єкт з усіх боків, тим самим оцінити зовнішній вигляд у всі 360 градусів. Плагінів для такого ефекту на jquery небагато і всі вони мають як переваги, так і істотні недоліки. Для мене було завдання реалізувати обертання так, щоб:

1. воно оберталося автоматично під час завантаження сторінки; 2. можна було вручну обертати об'єкт; 3. були кнопки керування.

Для мене виходом стала бібліотека treesixty.js. Але спочатку про основи. Я думаю, очевидно, що будь-який плагін чи бібліотека не зможуть самі "домалювати" об'єкт. Вам у будь-якому випадку знадобиться n-кількість зображень з усіх боків. По суті, всі бібліотеки працюють однаково. Дозволяють курсором миші "перемотувати" кадри-зображення. Іншими словами, ви вказуєте скільки у вас фотографій, плагін їх підвантажує і курсором миші (кнопками управління) ви по суті переглядаєте попереднє або наступне зображення, на кшталт анімації у флеш. Чим більше буде у вас таких кадрів, тим плавніша анімація, але і більше вага сайту.

Чому саме treesixty? По-перше, гнучкість. Ви можете встановити автоматичне обертання, можна задати "показ" елементів управління. По-друге, з усіх тут найплавніша була чомусь анімація. З мінусів: вам потрібно чітко вказати в init кількість фреймів, розміри і самі зображення повинні бути 1.jpg (розширення також можна вказати), 2, 3, 4 і т.д.

Щоб обертання стартувало автоматично, необхідно до функції дзвінка додати play();

Теперподивимося практично.

Зрозуміло, що спочатку ми повинні підключити бібліотеку та jquery