Эффект вращения изображений на 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, если хотите отключить мышь на слайдере

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

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


🔖 Выбор по тегам ×

Top