Эффект слежения за курсором на тильде
<h1>|</h1>
<!DOCTYPE html>
<script>...</script>
<body>
/////<h1>Hello word</h1>
</body>
/////<h1>Hello word</h1>
</body>
Здесь показан пример работы модификации, можно потыкать и посмотреть ;)
/
/
<Эффект преследования мыши>
<a href=”Видео-инструкция”></a>
<!-- Элемент, который будет двигаться за курсором -->
<img class="img-near-cursor" src="" alt="" />
<style>
:root {
/* URL картинки (элемента). Указывайте без кавычек! */
--url-image: https://static.tildacdn.com/tild6632-6435-4434-b163-313863333630/CycleCursor.png;
/* Ширина картинки */
--width-image: 8px !important;
/* Высота картинки */
--height-image: 8px !important;
/* Чем больше секунд, тем дольше элемент будет догонять курсор */
--delay-image: 0.1s;
/* Расположение элемента среди слоёв */
--z-index-image: 999999;
}
/* Стили для элемента */
.img-near-cursor {
width: var(--width-image);
height: var(--height-image);
transition: var(--delay-image) linear;
z-index: var(--z-index-image);
pointer-events: none;
position: fixed;
top: 0;
left: 0;
}
@media (max-width: 1199px) {
/* Отключаем элемент, когда разрешение экрана ниже 1199px */
.img-near-cursor {
display: none;
}
}
</style>
<script>
// Вызываем функцию, которая устанавливает URL картинке
setImage();
// Вызываем функцию, которая заставляет картинку следить за курсором
followImageToCursor();
function setImage() {
let imgNearCursor = document.querySelector(".img-near-cursor");
let body = getComputedStyle(document.body);
let urlImage = body.getPropertyValue("--url-image");
imgNearCursor.setAttribute("src", urlImage);
}
function followImageToCursor() {
let imgNearCursor = document.querySelector(".img-near-cursor");
let offsetWidth = imgNearCursor.offsetWidth / 2;
let offsetHeight = imgNearCursor.offsetHeight / 2;
document.addEventListener("mousemove", (event) => {
imgNearCursor.style.transform =
"translate3d(" +
(event.x - offsetWidth) +
"px, " +
(event.y - offsetHeight) +
"px, 0px)";
});
}
</script>Language:HTML, XML