Автор

27 04.2013
Эффект вращения изображений на 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

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

Есть довольно много методов для <input type="file" /> элемента. Я попробовал большинство из них, но ни один не был достаточно хорош. Вероятно, худшей техникой была та, в которой входной элемент помещается в емкость (которая имитирует кнопки), а на вход следует за курсором, так что, когда вы щелкните в любом месте на контейнере, вы нажимаете на ввод. Звучит интересно и странно одновременно, верно?


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

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


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

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


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

Представление мини-библиотеки экспериментальных эффектов прокрутки страницы.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close