Spotlight effects can be a pretty creative way of revealing content on your website. And they're surprisingly easy to create with a little JS and CSS!
The basic idea
TLDR; Use CSS radial gradient backgrounds, and then use JS to track the mouse movement and move the center of the gradient.
There are other, more complex ways of doing this - you could use canvas or external libraries - but I find the simpler approach is a good starting point and should work well enough for most use cases.
Let's get started:
And...that's pretty much it.
#spotlight div is positioned so that it always covers the entire viewport. We then attach an event listener to listen to the mouse's movement, and set the
Y directly in the
radial-gradient CSS value.
#00000000 10px, #000000ee 350px part basically means we want a gradient that is transparent at it's center, and at 350px from the center is a slightly transparent black. That's how the gradient center reveals what's beneath.
Making it configurable
So far we have a basic spotlight, so let's go ahead and improve it.
We can create a
Spotlight class that allows you to easily set up new spotlights and pass in some options:
toggleElis the id of the element you want to use as a trigger to toggle the spotlight.
outerRadiusset the spotlight size.
outerColorsets the background color (try passing in
redfor a truly bleeding edge experience).
The class also provides methods for switching the spolight on and off.
Making the light feel more natural
To make it a look a little more natural, there are a couple of added touches.
First, there is a slight delay in the spotlight movement. This adds a sense of weight to the light, like we're dragging it around with our mouse.
Also, you'll notice the light "pulses" slightly - continually increasing and decreasing.
But how do we get it to work?
My first instinct was to animate the gradient size, but that's not actually possible in CSS! Next I thought of somehow changing the
outerRadius value in steps inside a function called in a
setInterval, but that turned out to be a really stupid idea. Finally, I came up with the simple solution - animate the scale of the entire spotlight div with a CSS animation.
This way, we don't need to touch the actual gradient, we just animate the entire "canvas", stretching the gradient in the process. I also used CSS animations for the "switching on/off" part.
Obviously, you shouldn't be using spotlights in every single page (please don't!). But when used right, they're a nice way for users to feel like they're discovering some cool concealed content for the first time.
Thanks for reading!