Как сделать похожий эффект слежения за элементом?

Question

[Иван Медведев]

Собственно вопрос в том, что мне надо повторить эффект следования элемента за курсором как на сайте: https://ticketed.webflow.io/ (скртин)


Я нашел скрипт и адаптировал под себя. Но, при переходе курсора на нижний целевой элемент, позиция всплывающего меняется. К свойству top плюсуется какое-то количество пикселей. Надо по вертикали всегда центрировать его относительно экрана.

Вот мой код. Родитель li. Целевой элемент item-wrap

<ul class="bestseller_service">
				<li class="bestseller_service_item">
					<div class="item-wrap">картинка</div>
				</li>
				<li class="bestseller_service_item">
					<div class="item-wrap">картинка</div>
				</li>
				<li class="bestseller_service_item">
					<div class="item-wrap">картинка</div>
				</li>
				<li class="bestseller_service_item">
					<div class="item-wrap">картинка</div>
				</li>
			</ul>

let block = $(".bestseller_service_item");
    let item = $(".item-wrap");

    block.mousemove(function (e){
        item.css('position', 'fixed');
        item.css('left', e.screenX + 200 + 'px');
        item.css('top', e.screenY + -100 + 'px');
    })

Comments

[Виктор Майоров]

codepen в студию