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
🔥 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.
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:
This gives us a pretty boring grey square:
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:
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-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
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:
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
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!
Or get creative with the hover effect!
These are just some simple examples, I’d love to see what you can come up with!
🔥 Dynamic Grid Sizes
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:
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
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.
🔥 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!
Peace, Love & 🔥