Cursor Trails — 3 simple CSS tricks to add 🔥 to any website [Part 1]

In this series, I want to share 3 CSS tricks that I have consistently found myself using when adding polish to websites. Adding subtle, surprising elements that add to the experience of browsing your website can help to set yourself apart and make your site memorable. We will focus on performant CSS animations that you can easily drop into any site.

In Part 1, we are going to take a look at perhaps my favorite CSS effect: Cursor Trails

Image for post
Image for post

🔥 Cursor Trails

This is one of my favorite effects to use because it is so fun to play with but also super easy to implement. I use it on the Daily Fire homepage in the ‘Ready To Get Started’ section. Let’s see it in action first to get an idea of what we will be creating.

Image for post
Image for post
Ready To Get Started Section on https://daily-fire.com
Image for post
Image for post
Hero Section of https://www.whispir.com

As we can see it’s a pretty cool effect that is sure to add some “wow” to your site.

The effect is achieved with a few simple steps:

  • Create a grid of elements
  • Set their opacity to 0
  • Transition the opacity on hover

Pretty simple, right? The magic is in the trail effect, which is achieved by adjusting the transition-duration depending on whether the element is hovered or not.

Lets put this into action, one step at a time.

First let’s create a grid of elements. For this example, we will just use simple squares but you can use any web element you desire!

Note: We will be using the Slim templating language for the markup in this example. If you are not familiar with it, all you need to know is that CSS class names get expanded to div elements with the corresponding class. For example: .grid becomes <div class="grid"></div>

Setup the grid
CSS for our Grid

This gives us a pretty boring grey square:

Image for post
Image for post

Next, we can start on our effect by setting the opacity of the .grid__item to 0 and transition it on hover.

Now we have this:

Image for post
Image for post

This is a good start, but we are not getting much of a trail. Let’s bring this to life and make the trail longer by adjusting the transition-duration and transition-delay. Additionally, I find adding a subtle scale effect improves the result.

We use the transition shorthand syntax to change the timing of both the opacity and transform independently. The syntax for the transition property is as follows (from MDN):

transition: property name | duration | timing function | delay

Let’s see how we can implement this for our use case:

Let’s break this down a little, on line 6 we are telling the the .grid__item to transition the opacity over a duration of 2 seconds, with a 0.4 second delay. We also transition the changes to transform over 0.8 seconds, with no delay.

With these simple additions, we can create a much nicer effect:

Image for post
Image for post
Trails!

As you can see, we are now getting a trail! It may not be all that aesthetically pleasing, but I hope it illustrates how easy it is to create the effect. Reducing the length of the trail is as simple as reducing the duration or the transition-delay of the opacity transition.

I encourage you to have a play with the properties to see how easy it is to change the trail effect. Check it out on Codepen here:

This is just a simple example but as I mentioned, you can use any html element in this grid because you are just animating opacity and scale!

Let’s change the .grid__item element to an emoji rather than a grey square!

Image for post
Image for post
🔥Emoji

Or get creative with the hover effect!

Image for post
Image for post
😵

These are just some simple examples, I’d love to see what you can come up with!

🔥 Dynamic Grid Sizes

In the examples above, we set a fixed width and height for the grid in use. However, you may want to use this effect in a section where the size of the grid is relative to the viewport. To handle this use case, we are going to have to cheat a little bit and use some JavaScript.

To do so, we will need to write a script that:

  • Calculates the width and height of the grid to fill
  • Calculates how any grid items would fit horizontally
  • Calculates how any grid items would fit vertically
  • Calculate the total number of grid items that will fit in the grid
  • Append the grid items

The whole script looks like this:

Note: I’m using jQuery for simplicity in this example.

See it in action here:

Dynamic Grid Items

This is just one way to create a dynamic grid. You may wish to build upon this by creating a .grid__row for each horizontal line to give you more control over the horizontal overflow. Currently, each item simply wraps due to the flex-wrap: wrap property on the .grid element.

I hope this enables you to try this technique on your own websites!

🔥 Alternative Approaches

I like this approach because of its simplicity, however as with anything on the web, there are many different ways to create such an effect.

One especially powerful method is to use a HTML Canvas element and animate it with JavaScript.

I won’t go into the details here but you can see how much more intricate effects can be created on sites like Canva and IOHK.

🔥 Wrapping Up

I hope that was fun and you learnt something. I love the idea of adding little interactive elements like this to bring your pages to life. However, as with most web animations, subtlety is key. This effect can be quite eye catching so I would advise to use it sparingly and try to make use of it only in places where you want to surprise and delight.

I would love to see what you can do with this and hope that this article serves as inspiration to go ahead and produce your own take on it.

Stay tuned for part 2 and 3!

Image for post
Image for post

Peace, Love & 🔥

Written by

a Slack app for every music lover

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store