What we like: The eye cursor effect subtly differentiates videos from other elements on the page. It’s a great way to communicate to visitors that these are videos, not images.
This transforms into a white circle with an orange eye icon when hovering over video thumbnails on the page. Thinkingbox has a unique orange dot cursor with a shadow effect. What we like: The distort cursor effect creates a unique interactive experience, making the user feel like they’re already part of a collaborative design process. This will temporarily freeze the cursor effect so it looks like brushstrokes on a painting. Users are actually invited to “draw on the page” by holding and dragging their cursor. As users move their cursor over the page, the background distorts, becoming larger and darker. Utsobo is one of the coolest interactive websites. What we like: The flashlight cursor effect provides the user with control over their scrolling experience. On one layer that features the Dandelion Cranes Wallcovering, the cursor has a flashlight effect so the user can illuminate different elements on the page. On Moooi’s interactive site Paper Play, users scroll through various “immersive layers” which feature different products. What we like: The rainbow swirl cursor effect is a great contrast against the stark black background. This helps the user keep track of where they are on the web page and adds unique splashes to this black and white website design. Swirl Cursor EffectĪdvanced Team uses an advanced cursor effect that makes the user’s scrolling path look like a wake, or a disturbance of rainbow-colored water. Below are real websites with unique cursor effects.
They’re especially popular on creative websites, like agency and designer portfolios. Cursor EffectsĬustom cursors are popular in website design because they provide an opportunity to wow visitors who are expectating the default mouse pointer of their operating system. Let’s take a look at some possible cursor effects and ideas below, then walk through how to make an animated cursor. In addition to indicating a certain functionality, cursors can be animated to add some interactivity to the user’s browsing experience. Or, when attempting to drag and drop an image to a particular section on a website, the cursor may change to indicate that action is prohibited. For example, when hovering over a table element, the cursor may change to indicate the user can resize a row or column. When used correctly, cursors convey what’s happening or what’s possible on a site.
0 kommentar(er)
