Подсказки по наведению курсора

Подсказки по наведению курсора

Модификация позволяет создать подсказки при наведении курсора на объект.

Описание
Видеоинструкция по подключению
Инструкция с копированием шаблона к себе
ID шаблона:
39860706
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
В самом низу страницы создаём блок T123 и добавляем код.
Шаг 1
<!--Подсказки по наведению курсора
https://mt-webdesign.ru/cursor-img-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="cursor-follower"></div>
<style>
@media screen and (max-width: 480px) {
.cursor-follower {
display: none;
}
}
body {
overflow-x: hidden;
}
.cursor-follower {
position: absolute;
background-color: #000;
width:10px;
height: 10px;
border-radius: 100%;
z-index:10000;
transform: translate(70%, 70%);
user-select: none;
pointer-events:none;
transition: 
0.4s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
0.4s cubic-bezier(0.75, -1.27, 0.3, 2.33) background-image,
0.2s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity;
}
.cursor-active {
transform: translate(70%, 70%) scale(10);
background-size: cover;
}
.-img-1 {
background-image: url('https://static.tildacdn.com/tild3439-6432-4930-b565-393834303031/drag2.svg');
}
.-img-2 {
background-image: url('https://static.tildacdn.com/tild3431-3166-4433-a437-633263313165/Frame_6756957.svg');
}
</style>
<script>
follower = $(".cursor-follower");
var posX = 0,
posY = 0;
var mouseX = 0,
mouseY = 0;
TweenMax.to({}, 0.016, {
repeat:-1,
onRepeat:function(){
posX += (mouseX - posX) / 9;
posY += (mouseY - posY) / 9;
TweenMax.set(follower, {
css: {
left: posX - 12,
top: posY - 12
}
});
TweenMax.set(cursor, {
css: {
left: mouseX,
top: mouseY
}
});
} 
});
$(document).on("mousemove",function(e){
mouseX = e.pageX;
mouseY = e.pageY;
});
$(".cursor-hover-img-1").on("mouseenter mouseleave", function(){
$(".cursor-follower").toggleClass("cursor-active -img-1");
});
$(".cursor-hover-img-2").on("mouseenter mouseleave", function(){
$(".cursor-follower").toggleClass("cursor-active -img-2");
});
</script>
В Zero-блоке создаём объект, по наведению на который хотим выводить подсказку и вешаем на него класс cursor-hover-img-1
Шаг 2
Чтобы заменить изображение на своё, спускаемся в код и меняем его, как показано ниже (изображение можно загрузить, через блок IM01)
Шаг 3
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
3D галерея
Tilda
Подсказки при наведении курсора
Tilda