bkbta.blogg.se - Animated cursor

The best cursors there are those Dierk has designed himself. "For safe and aesthetically pleasing animations, the best place to go is Anicursor, a site run by German artist and engineer Dierk. Years, including more than 600 animated and static cursors The cursor is created from 2 dom elements for the inner and outer parts.Here are all the cursor archives Dierk has created during the past Run Devĭev has microbundle begin watching / building the files, while also running the demo project via Parcel, which imports from the local src directory. ', 'input', 'input', 'input', 'input', 'label', 'select', 'textarea', 'button', '.link']īuilds src with microbundle to the various common js patterns. Speed of outer cursor's lerp'd trailing animation If native cursor should be hidden via internal method adding inline styles to html and body.Īlpha transparency level of outer cursor (0 - 1).ĭefines inner size.inner and Outer size.outer cursor sizesĭefines amounts inner/outer cursors scale on hoverĭefines amounts inner/outer cursors scale on click If lib should add required styles to element.

Create Cursor MarkupĪnimatedCursor() accepts a single options param, which supports the following properties: Option

Outer cursor can have a blend-mode applied for an exlusion effect over hovered text / elements.

Outer cursor can also be just a border to create a Donut style cursor.

An inversely scaling effect between the inner and outer cursor parts on click or link hover.

A slight trailing animation of the outer outline.

An outer, outlining circle ( cursorOuter), with slight opacity based on the inner cursor's color.

More the specifically, the cursor is made of

Hybrid NPM module, works with import and require.

Cursor is just a dom element that you can further style (ie: add border to outer cursor).

Options to customize color, sizes, scaling percentages.Cursor elements inversely scale on click and hover. Cursor is comprised of inner dot and outer circle with trailing animation.Replaces native Cursor with custom animated cursor.Dependency free, pure JavaScript library.A pure JS library to replace native cursor with a custom animated cursor.