10 января 2016

Трехмерная модель на JQuery

JQuery

Здарова! Праздники это хорошо) но не забываем, что учится чему-то новому не менее важно!)

Все прекрасно знают, что время флеша уже прошло, а время полной интеграции HTML5 в браузеры еще не наступило. Но что делать когда хочется все больше интерактивности, которая не утяжеляла бы сайт, когда хочется воистину крутую фичу на сайт (особенно магазин), к примеру сделать трехмерную модель товара. А я скажу вам) стоит воспользоваться JQuery!

И так начнем!

HTML

<head>
	<meta charset="UTF-8" />
	<title>Трехмерная модель на jQuery | JQuery</title>
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="js/jquery.interactive_3d.js"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/elusive-webfont.css" />
</head>

Подключив нужные библиотеки JQuery и стили, создаем единственный блок с ID "my_model", в этом контейнере и будет содержаться наша трехмерная модель.

<div id="my_model" class="interactive_3d">
	<img src="images/frame_1.png">
	<div class="title">
		<h1>Трехмерная модель на jQuery<small>Автозапуск</small></h1>
		<div class="header">
			<div class="menu">
				<a href="index.php">Пример 1</a>
				<a href="index2.php">Пример 2</a>
				<a class="active" href="index3.php">Пример 3</a>
			</div>
		</div>
		<p class="direction"><i class="customicon-move"></i>Зажми и тяни!</p>
	</div>
</div>

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

$(document).ready( function() {
	$("#my_model").interactive_3d({
		frames: 38,
		entrance: false
	});
});

Ниже можно поближе рассмотреть все настройки скрипта, который мы используем:

$("#interactive_3d").interactive_3d({
    frames: 10,
    cursor: "move",
    speed: 0,
    entrance: true,
    preloadImages: true,
    touchSupport: true,
    loading: "Загрузка..",
    autoPlay: false
});

Некоторые пояснения по коду:

frames — это то количество изображений, которое используется при анимации, по умолчанию 10.
cursor — вид курсора при наведении. Полный список можно изучить ЗДЕСЬ.
speed — скорость вращения, по умолчанию равна 0.
preloadImages — данный плагин позволяет подгрузить в кэш браузера все изображения до того как пользователь начнет вращать объект.
loading — индикатор загрузки, если изображения не загрузились.
autoPlay — автозапуск, как на примере 3.

Итог

Думаю все согласны, что отображение товаров магазина в виде трехмерной модели куда круче смотрится нежели использование кучи фотографий в стандартной галерее. Данный эффект очень легко сделать и как вы смогли заметить ничего сложного в настройке скрипта нет, потому дерзайте!) Ждем появление данного скрипта в Ваших магазинах)

До встречи! Были рады помочь)

vk.com
Комментарии