Автор

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

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

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


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

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


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

Если вы ищете, как создать активную диаграмму (или схемы) с информацией - эта новая статья для вас. Я просматривал в Интернете, и нашел одно хорошее и серьезное решение, - Highcharts библиотека. Это чистая javascript библиотека, которая предлагает интерактивные и интуитивно понятные графики. Эта библиотека поддерживает различные возможные графики: площадь, линии, сплайн, areaspline, пирог, колонны и другие. Я думаю, что это лучший способ, чтобы получить информацию для зрителей. Сегодня в демо я подготовил несколько примеров с разными графиками.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close