Автор

Эффект вращения изображений на 360 градусов

Эффект вращения изображений на 360 градусов


 

Если перед вами встала задача реализовать эффект вращения изображения на 360 градусов то вам будет полезен следующий плагин jQueryThreesixty - достаточно универсальный плагин который позволяет достичь эффект вращения изображений под любым углом. Такие эффекты вращения стали весьма популярны в интернет-магазинах, ведь позволяют дать полное представление о товаре. Кроме этого плагин является кроссбраузерным, а это весьма упрощает жизнь при разработке.

 

ДЕМО
ИСХОДНИКИ

 

Демонстрации приведен один пример реализации эффекта, в исходниках можно найти еще несколько интересных эффектов с элементами управления. И так, давайте приступим.

Шаг 1. HTML

Нам необходимо создать классы, которые будут отвечать за вызов необходимой нам информации, кроме этого мы добавим спаны в которых будет заключены обозначения о загрузке всех изображений. Картинки будут загружаться все одновременно, так как их достаточно много, это может занять некоторое время:

 <div class="threesixty car">
 <div class="spinner">
 <span>0%</span>
 </div>
 <ol class="threesixty_images"></ol>
 </div>

 

С разметкой мы разобрались, давайте перейдем к следующему шагу.

 

Шаг 2. CSS

 

Так как основную работу будет выполнять плагин, нам стили необходимы только для оформления контейнера и его базовых параметров:

#container .threesixty {
 position: relative;
 overflow: hidden;

 margin: 20px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
#container .threesixty .spinner {
 width: 60px;
 display: block;
 margin: 0 auto;
 height: 30px;
 background: #333;
 background: rgba(0, 0, 0, 0.7);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
#container .threesixty .spinner span {
 font-family: Arial, "MS Trebuchet", sans-serif;
 font-size: 12px;
 font-weight: bolder;
 color: #FFF;
 text-align: center;
 line-height: 30px;
 display: block;
}
#container .threesixty .threesixty_images {
 display: none;
 list-style: none;
 margin: 0;
 padding: 0;
}
#container .threesixty .threesixty_images img {
 position: absolute;
 top: 0;
 width: 100%;
 height: auto;
}
#container .threesixty .threesixty_images img.current-image {
 visibility: visible;
 width: 100%;
}
#container .threesixty .threesixty_images img.previous-image {
 visibility: hidden;
 width: 0;
}
#container .threesixty .nav_bar {
 position: absolute;
 top: 10px;
 right: 10px;
 z-index: 11;
}
#container .threesixty .nav_bar a {
 display: block;
 width: 32px;
 height: 32px;
 float: left;
 background: url(../../assets/images/sprites.png) no-repeat;
 text-indent: -99999px;
}
#container .threesixty .nav_bar a.nav_bar_previous {
 background-position: 0 -73px;
}
#container .threesixty .nav_bar a.nav_bar_next {
 background-position: 0 -104px;
}
#container .threesixty .nav_bar a.nav_bar_play {
 background-position: 0 0;
}
#container .threesixty .nav_bar a.nav_bar_stop {
 background-position: 0 -37px;
}

 

Шаг 3. JS

 

Для правильной работы эффекта нам необходимо подключить и инициализировать плагин threesixty.js, кроме этого мы укажем дополнительные параметры при инициализации:

 <script type="text/javascript" src='src/threesixty.js'></script>
 <script>
 window.onload = init;

var car;
 function init(){

car = $('.car').ThreeSixty({
 totalFrames: 52, // Общее число кадров используемых в слайдере
 endFrame: 52, //  Указываем последний кадр для автоостановки
 currentFrame: 1, // Устанавливаем стартовый кадр при инициализации
 imgList: '.threesixty_images', // Выбираем список изображений
 progress: '.spinner', // Селектор для отображения процесса загрузки
 imagePath:'assets/product4/', // Путь к необходимым изображениям
 filePrefix: '', //  Префиксы
 ext: '.png', // Формат изображений
 height: 447,
 width: 1000,
 navigation: true
 });
 }
 </script>

Плагин достаточно гибкий, как мы уже говорили раннее, по этому он имеет набор весьма интересных настроек:

totalFrames:180, - число - общее количество кадров используемых при повороте на 360 градусов
currentFrame:1, - число - устанавливаем стартовый кадр при инициализации
endFrame:180, - число - указываем последний кадр для автоостановки
framerate:60, - число - число кадров для анимации
filePrefix:'', - строка - указываем префикс для файлов.
ext:png, - строка - расширение для всех файлов используемых в слайдере
height:300, - число - высота для контейнера со слайдером
width:300, - число - ширина для контейнера со слайдером
style:{}, - объект - контейнер со стилями для предзагрузки
navigation:true, - логическая переменная - установите false, чтобы не показывалась навигация по умолчанию
autoplayDirection:1, - число - направление вращения, может быть 1 или -1
dragging:true, - логическая переменная - укажите false, если хотите отключить мышь на слайдере

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Эффект вращения изображений на 360 градусов

Добавление небольших деталей может придать Вашему сайту завершенности. jQuery это прекрасная JavaScript библиотека, которая поможет довести мельчайшие детали до совершенства.


Эффект вращения изображений на 360 градусов

Многие вебмастера и разработчики сайтов не раз задавались вопросом: «Как перевести картинку в CSS»! Представляю Вам конвертер который делает эту задачу реальной!


Эффект вращения изображений на 360 градусов

Модальные окна достаточно эффективное решение в современном веб-дизайне, кроме того, что пользователь остается на той же странице и получает необходимую информацию, так и красивые окна позволяют раздвинуть границы веб-дизайна, добавив особую изюминку в дизайн. Как вы уже догадались в сегодняшнем уроке речь пойдет о создании красивых модальных окон с помощью небольшого плагина jquery. Данный способ реализации окна имеет множество настроек, что позволит подогнать плагин под необходимые вам параметры, затратив при этом минимум усилий.


Эффект вращения изображений на 360 градусов

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close