דילוג לתוכן הראשי
Overview|Storytelling|Entrances|Depth on Scroll|WOW|Section Transitions|Page Transitions|Loaders|Mouse & Hover|Infrastructure|How it works
When the mouse is part of it💥 OV 1-2

Mouse & Hover

דברים שמגיבים ליד של הגולש: עיגול שעוקב אחרי הסמן, רשימה שהתמונה שלה צפה ליד הסמן, פריטים שנעים עם העכבר. רק בדסקטופ עם עכבר: בטלפון לא רואים אותם, אז שום דבר חשוב לא גר רק כאן.

UkCursorFollowUkHoverRevealmouse_move_on_elementLottie_Mouse

#gsap-cursor-follow

UkCursorFollow

<Component />Mouse
<UkCursorFollow label="Explore">
  …rest of the code
</UkCursorFollow>

Style the dot on body.demo-<brand>, not the wrapper

#gsap-hover-reveal

UkHoverReveal

<Component />Mouse
<UkHoverReveal items={[{ label: '…', img: '/a.jpg', meta: '…' }]} />   // renderRow={…} for a row of your own
  • Architecture2024
  • Interiors2024
  • Landscape2023
  • Residential2023
  • Commercial2022

#gsap-mouse-move

mouse_move_on_element

[attribute]Mouse
<section mouse_move_area="">                 // the area (default: the closest <section>)
  <span mouse_move_on_element="30">          // px at the edge of the area
    <img data-float src="…" />               // floats on its own, CSS (--uk-float-y, --uk-float-duration)
  </span>
</section>

mouse_move_on_element and data-float never on the same element

הזיזו את העכבר כאן.

עיצוב

#gsap-lottie-mouse

Lottie_Mouse

<Component />Mouse

Basic usage

<div style={{ width: 400, height: 400 }}>   // the size is the wrapper's
  <Lottie_Mouse src="..." />
</div>

Props

src
Lottie URL (.lottie or .json)
ease?
Lerp smoothing. 0.01 = very slow · 0.3 = snappy · default 0.08
zone?
CSS selector for the mouse-tracking zone. Without it, tracks the full window width.

Live demo