Карта проектов "Mediaservice"

Главная Статьи
28.01.2020
Станислав Миронов

Введение

В процессе разработки сайта для компании "Mediaservice", были созданы такие интересные решения как "Интерактивный баннер" и "Карта проектов".


Решение "Карта проектов"

case1.PNG

В данном решении описана интерактивная карта, показывающая в каких областях нашей страны были реализованы проекты компании “Mediaservice”. Особенностью данного решения является взаимосвязь карты со слайдером.

Для выполнения данной задачи нам понадобится SVG. C ним легко работать человеку, знакомому с HTML. SVG — это векторный формат, основанный на XML. То есть у SVG-рисунка есть своя DOM, к различным элементам которого можно применять CSS-правила. Для начала нам нужна карта. Она должна будет взаимодействовать с пользователем и с данными на веб-странице, на которой она расположена. Её можно найти на просторах интернета либо нарисовать самому.

Ниже приведены разметка карты и области.

Пример определения карты:

case2.JPG

Пример определения области:

case3.JPG

Каждый наш слайд должен быть связан с конкретной активной областью и для этого каждому слайду мы добавим data - атрибут (data-location) с уникальным именем.

Ниже приведён пример разметки слайда:

case4.JPG

Также добавим data-атрибут(data-area) к областям, которые мы хотим сделать активными. Значение data-атрибута активной области должно соответствовать нужному слайду.

Ниже приведён пример разметки активной области с data-атрибутом:

case5.JPG

Обратите внимание, что значения data-атрибутов активной области и слайда абсолютно идентичны.


Результат:

case6.png

Теперь, когда у нас есть карта, можем перейти к написанию кода на языке JavaScript.

Первым делом определим слайдер. Для этого воспользуемся библиотекой Swiper.js

Она предназначена для использования на мобильных веб-сайтах и мобильных веб-приложениях. Данная библиотека позволяет легко и гибко настраивать слайдер под нужды пользователя.

Ниже приведён пример инициализации слайдера:

case7.JPG

Также нам понадобятся переменные для массива областей, массива слайдов и активного слайда.

case8.JPG

Стоит отметить, что у каждого слайда есть свой уникальный индекс и по умолчанию первый слайд является активным. Его идентификатор равен 0.

Для дальнейшего определения активного слайда мы будем использовать переменную activeSlideIndex

Swiper.js позволяет добавлять непрерывную прокрутку слайдов, за счёт добавления дубликатов. Слайды - дубликаты имеют класс swiper-slide-duplicate

Нам же нужны только оригинальные слайды и для этого мы создадим новый массив.

case9.JPG

Ниже приведён пример выбора оригинальных слайдов:

case10.JPG

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

case11.JPG

Swiper.js имеет набор полезных методов, один из которых slideTo( ).

У него есть три параметра: index, speed, runCallbacks,

где index - номер слайда,

speed - продолжительность перехода,

runCallbacks - генерирует события перехода (по умолчанию true).

Этот метод позволяет запускать переход к определённому слайду с индексным номером, равным параметру «index», на время, равное параметру «speed».

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

Продолжительность перехода установим 500 миллисекунд.

Ниже приведён пример взаимодействия областей со слайдером:

case12.JPG

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

Когда ключевая область становится активной, к ней будет добавляться специальный класс map-area--active. С помощью этого класса мы будем менять цвет области, чтобы можно было отличить её от от обычных областей.

case13.png

Мы реализовали взаимодействие карты со слайдером, осуществляя клик по ключевой области.

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

Для этого мы воспользуемся событием Swiper.js slideChange. Событие будет запущено при изменении текущего активного слайда.

Как только текущий слайд сменится на другой, в этот же момент изменится и номер индекса текущего активного слайда.

Новый номер будет помещён в переменную realIndex, после чего ключевой области, индекс которой равен номеру текущего активного слайда, будет присвоен класс map-area--active

case14.JPG

Мы заканчиваем работу с JavaScript и переходим к стилям (CSS). На этом этапе нам нужно выделить особым цветом ключевые и активные области.

case15.png

Чтобы выделить ключевые области достаточно изменить прозрачность, прописав fill-opacity со значением 1.

Для активной же области мы зададим фон, который будет выделять её (fill: #f9b60a).

Добавим подсвечиваемый контур, который будет отображаться при наведении. За ширину контура отвечает свойство stroke-width (сделаем его равным трём), а за цвет, свойство stroke (Сделаем его таким же цветом как фон).

case16.png

Итоговый результат:

case17.jpg

Вывод:

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

Интерактивная карта
Решение, предложенное со стороны дизайнера-проектировщика. Карта, с которой пользователь может взаимодействовать связана с блоком слева: проекты. Цель решения: повысить взаимодействие с сайтом, представить по-другому портфолио.
3 идеи, заложенные в это решение
Повышение CTR с помощью интерактива
Возможность размещения проектов по всей Росии
Визуальное отображение проектов с переходом на работу
АО Фармленд г. Уфа
АО Фармленд г. Уфа
АО Фармленд г. Уфа

Узнайте стоимость Вашего сайта

Мы находим лучшие решения для Вас. Ваши пожелания и мнения будут учтены на всех этапах разработки проекта. Мы придерживаемся среднего ценового сегмента по рынку – это позволяет нам создавать качественный и доступный продукт. Заказывая разработку сайта любой сложности в Uralmedias, вы принимаете правильное решение.
Заказать проект
Время покорять новые вершины!
Категория
Нажимая кнопку “Заказать проект”, вы принимаете условия пользовательского соглашения
Задайте вопрос руководителю
Нажимая кнопку “Заказать проект”, вы принимаете условия пользовательского соглашения