Как создать круговую панораму на сайте на JSСайты становятся все объемней, при этом возникает желание развивать ресурсы в ногу с новыми технологиями, как вы знаете, панорамы весьма популярные в наше время, по этому сегодня мы расскажем и покажем как можно реализовать этот замечательный эффект у себя на сайте не используя тяжелых техник, а попытаемся максимально упростить задачу. У нас будет большое изображение, которое будет развернуто на 360 градусов, при этом мы добавляем ползунок снизу, чтобы пользователь мог с легкостью перемещаться по панораме.

 

Для реализации такого эффекта нам понадобиться jQuery.isAlive это плагин JQuery для сложных анимационных сайтов, он использовался ранее как основа для создания параллакса. Он полностью совместим с IE7 + и всех мобильных платформ. Сенсорные события включены, что весьма удобно. И так, давайте приступим.

Шаг 1. HTML

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

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

Как создать круговую панораму на сайте на JS

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

Шаг 2. CSS

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

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

Шаг 3. JS

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

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

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

 

Читайте также: