Apply CSS3 transforms, transitions and animations to cursors.
In order to slide forwards or backwards in carousels, a common design pattern is to use arrow buttons either side of the carousel, overlaying the carousel content.
However, these buttons can encroach on content and add clutter. To avoid these issues we could:
Note that this effect will only be seen on desktop - there’s no cursor on touch devices. As space is usually limited on touch devices we could look at adding arrow buttons in below the content.
Now that we have a UX justification for this design pattern we need to look at a clean and reliable frontend implementation.
Mousemove checks if the cursor is in the left or right portion of the carousel, and adds a “left” or “right” class accordingly. Click event checks if the target is a link (either within the content or carousel pagination), if not it will page to next or previous slide, depending on whether the cursor is in the left or right portion of the carousel.
To enhance carousel interactions, we can transition the cursor when switching from left to right. CSS transforms can’t be applied to cursors, so we will have to replace our cursor with a
<div> that can be styled as a cursor. In the next Codepen we set up mousemove event listeners that move the
<div> in place of the browser’s cursor and add a rotation transition. It’s important to note we are using CSS transforms to move the cursor (rather than “left” / “top” properties) for performance as these don’t trigger a repaint/composite.
The only issue with the above example is that the pointer button does not show when we hover over the CTA button or the carousel navigation. To get around this we can add mouseenter/mouseleave events to elements we want to show the pointer when hovering (e.g.
<button>). We also need to add
pointer-events: none to
.cursor’s CSS. This prevents the
.cursor element getting in the way of browser’s cursor when hovering
<a> tags and
Interactions contribute to the character of a website. Think carefully about which is the best fit for your project.