Интерактивные маркеры на карте

demosourse

Эффект частичного отображения фонового изображения в зависимости от близости курсора к тому или иному маркеру на карте.

Мы располагаем маркеры поверх основного изображения:

<section class="interactive-points" id="interactive-1" tabindex="0">
	<img class="static" src="img/map.png" alt="Map of London" />
	<div class="backgrounds">
		<div class="background__element" style="background-image: url(img/1.jpg)"></div>
		<div class="background__element" style="background-image: url(img/2.jpg)"></div>
		<!--...-->
	</div>
	<svg class="points" viewBox="0 0 1885 1080" width="100%" height="100%">
		<path class="point" d="M409.2,195.4L409.2,195.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C416.3,213.8,415.6,201.8,409.2,195.4z"/>
		<path class="point" d="..."/>
		<!--...-->
	</svg>
	<div class="points-tooltips">
		<div class="point-tooltip"><h2 class="point-tooltip__title">Rupert Street</h2><br><p class="point-tooltip__description">The connection to London Bridge that no one knew about</p></div>
		<div class="point-tooltip"><!--...--></div>
		<!--...-->
	</div>
	<div class="points-content">
		<div class="point-content">
			<h3 class="point-content__title">The Rupert Connection</h3>
			<p class="point-content__subtitle">24<sup>th</sup> of February, 1927</p>
			<p class="point-content__text">Descended from astronomers...</p>
		</div>
		<div class="point-content">
			<!--...-->
		</div>
		<!--...-->
	</div>
</section>

При наведении мыши отображается подсказка:

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

Настройки:

/**
 * Настройки PointsMap.
 */
PointsMap.prototype.options = {
	// Максимальная непрозрачность фона при приближении мыши к маркеру
	maxOpacityOnActive : 0.3,
	// Расстояние от мыши до маркера когда непрозрачность фона равна 0
	maxDistance : 100,
	// Если viewportFactor не равен -1, то maxDistance
	// будет рассчитываться [ширина родительского элемента / viewportFactor]
	viewportFactor : 9,
	// Если курсор мыши на [activeOn]px дальше от
	// маркера, то непрозрачность её изображение будет равна point.options.maxOpacity.
	activeOn : 30
};

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2016/07/20/simple-interactive-points-effect/
Перевел: Станислав Протасевич
Урок создан: 20 Июля 2016
Просмотров: 4429
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 28 Сентября 2016 14:37
    SveriA
    Как правильно переместить маркеры на карте? с "circle" было бы понятно, но тут не могу разобраться... туториал в студию плиз
  • 28 Сентября 2016 16:44
    SveriA
    Вроде разобрался, M и L начальные точки, C точки завершающие. Точные координаты точек "C" надо пересчитывать с учетом данного рисунка (капелька). Кому надо - сделал мини калькулятор именно для этих деталек, в xls. !Внимание вместо запятых должны быть точки! качаем https://yadi.sk/i/uerJe6OHvqwJc Поэкспериментировать можно тут: http://www.w3schools.com/graphics/tryit.asp?filename=trysvg_myfirst
^ Наверх ^