jQuery PointPoint – плагин, позволяющий сделать акцент на элементе

Каждый сайт по-своему уникален. Зачастую наличие большого числа элементов на странице заставляет пользователей упустить главные из них. Именно поэтому разработчик из-за рубежа Martin Angelov придумал плагин под названием «jQuery PointPoint».

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

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

Итак, что нужно сделать, для того чтобы установить этот плагин к себе на сайт?

1. Если на вашем сайте отсутствует библиотека jQuery – то подключите ее в секцию HEAD:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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

3. В файл стилей вашего сайта (желательно в самый низ) вставьте:

.pointPointArrow {
	width: 16px;
	height: 16px;
	background: url("/PointPoint/arrow.png") no-repeat;
	position: absolute;
	display:none;
	z-index: 100000;
	top: 0;
	left: 0;
}

4. Перед закрывающим тегом </body> подключите скрипты:

<script src="/PointPoint/transform.js"></script>
<script src="/PointPoint/jquery.pointpoint.js"></script>

<script>
			
	$(function() {
	
		$(".pointPoint_element").pointPoint({
			"distance": 30 // Расстояние от стрелки до курсора
		});	
	
	});

</script>

5. И завершающим шагом для всех элементов (да-да, вы не ошиблись – количество выделенных элементов на странице не ограничено) вы присваиваете класс:

class="pointPoint_element"

Сохраняете все изменения и любуетесь результатом.