Объемная карта для сайта с помощью JavaScriptЗачастую на одностраничных сайтах можно встретить карту, на которой владелец сайта информирует о своем местоположении. Выглядит это обычно как вытянутая карта с сервисов Google или Yandex. Но иногда возникает желание отойти от привычных форматов и реализовать нечто необычное. В данном уроке мы рассмотрим именно такой подход к формированию карты на сайте. Но с небольшой особенностью, мы это сделаем с эффектом объемности. Кроме этого мы можете с легкостью ею манипулировать, то есть вращать и приближать.

 

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

Шаг 1. HTML

Так как, мы используем шейдера, то нам необходимо инициализировать данный процесс, разметка достаточно простая, но мы покажем Вам только ее часть:

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

Объемная карта для сайта с помощью JavaScript

Шаг 2. CSS

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

Кроме этого мы подключим шрифты с репозитория Google, для более креативного отображения текста в наших блока. Давайте продолжим.

Шаг 3. JS

Последним шагом будет реализация отображения всего контейнера и манипуляция при помощи курсора мыши:

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

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

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