magnetic-cursor

Курсор·Шаблон: Runok - Web Agency HTML5 Template·Складність анімації: medium·Адаптивний: Ні

Файли-джерела

index.htmlheader.header.sticky-active

Бібліотеки

jquery

Summary

A custom dot-style cursor (.mt-cursor) appended to <body> at runtime; follows the mouse via transform: translate(x,y) on every mousemove and expands when hovering links, buttons, swiper navs, and any element flagged with .cursor-effect.

HTML structure (minimal)

<!-- Created at runtime; you do NOT author this in HTML. -->
<body>
  <!-- existing markup -->
  <div class="mt-cursor"></div> <!-- jQuery appends on document ready -->
</body>

Key SCSS tokens

.mt-cursor {
  position: fixed; top: 0; left: 0; width: 30px; height: 30px;
  border-radius: 50%; pointer-events: none; z-index: 9999;
  background: var(--rr-color-theme-primary);
  mix-blend-mode: difference; visibility: hidden;
  transition: width .3s ease, height .3s ease, background .3s ease;
}
.mt-cursor.active {
  width: 60px; height: 60px;
  background: rgba(255,255,255,.2);
}
@media (hover: none) {
  .mt-cursor { display: none; }
}

Animation logic

$("body").append('<div class="mt-cursor"></div>');
var cursor = $(".mt-cursor"),
    linksCursor = $("a, .swiper-nav, button, .cursor-effect"),
    crossCursor = $(".cross-cursor");

$(window).on("mousemove", function (e) {
  cursor.css({
    transform: "translate(" + (e.clientX - 15) + "px," + (e.clientY - 15) + "px)",
    visibility: "inherit",
  });
});

linksCursor.on("mouseenter", function () { cursor.addClass("active"); });
linksCursor.on("mouseleave", function () { cursor.removeClass("active"); });

Notable details

mix-blend-mode: difference lets the same single-colour cursor stay visible over both dark hero photos and light light-mode surfaces — no JS toggling needed for the inverted state.
The cursor element is appended once per page; selectors like a, button, .swiper-nav, .cursor-effect are bound on document ready so dynamically inserted markup AFTER that point won't get the expand behaviour without re-binding.
Grouping the targets via the .cursor-effect opt-in class means non-link elements (cards, hover-revealed thumbnails) can opt into the expanded cursor without changing their semantics.

Use when

Agency or portfolio sites where the cursor itself becomes a brand element.
Hero-heavy designs that benefit from a unified cursor color across light/dark imagery.

Caveats

The cursor is always 30 px in resting state — no easing/lerp toward the pointer position, so on low-frame-rate devices it can feel "snappier" than pointer-following cursors with GSAP quickTo.
Mobile browsers fire mousemove inconsistently; the SCSS hides the cursor on touch devices via @media (hover: none). If the project targets iPad with a Magic Keyboard, override that block.
New DOM injected after page load (e.g. modal content, lazy carousels) won't pick up the mouseenter binding without manual re-attachment.