Автор

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 градусов

Если вы используете какие то графические редакторы на сайте, или просто хотите скрасить некий материал с помощью выбора цвета, или дать возможность оформить на свой вкус комментарии пользователю тогда этот урок именно для Вас. В сегодняшнем уроке речь пойдет о скрипте Flexi Color Picker, который использует только JavaScript для создания интерфейса выбора цвета. Без flash, изображений, однопиксельных div. Для его работы не нужно никаких библиотек.


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

Сегодня один посетитель данного сайта выразил свое недовольство что я обманываю своих клиентов!!! Написал отзыв, но при этом не оставил своих координат для ответа!!! Можно было бы оставить без внимания этот отзыв, но я решил написать ответ, так как очень часто подобные умники пишут толком не разобравшись!


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close