How to create followspot effect using HTML CSS and jQuery ?

Last Updated : 06 Jul, 2023

The follow-spot effect (spotlight effect) is an effect that can be easily implemented using jQuery. The effect is quite popular for the opening or front banner design for any website.

Approach: The approach is to use circle CSS on the mouse movement effect using the mousemove() function provided by jQuery.

HTML Code: The HTML code is used to design the basic structure of the body. In this section, we will use a <div> tag that wrapped inside a <section> tag.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0" />
    <title>Split Effect</title>
</head>

<body>
    <section>
        <div class="geeks"></div>
    </section>
</body>

</html>

CSS Code: The CSS property is used to set the style to the image.

CSS

body {
    margin: 0;
    padding: 0;
}

section {
    background: url(geeks.png);
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
}

.geeks {
    position: absolute;
    width: 100%;
    height: 100%;
}

jQuery Code: We have used the mousemove() function to track the mouse movement and apply the effect according to cursor movement. For creating a circle, just use radial-gradient along with the X and Y points that are basically the location of the cursor and provide a radius of 30% for roundness. Don't forget to apply this CSS to the div tag.

javascript

$(document).mousemove(function (e) {
    let X = e.pageX;
    let Y = e.pageY;
    $(".geeks").css("background",
        "radial-gradient(circle at "
        + X + "px " + Y +
        "px, transparent, #000 30%)"
    );
});

Complete Code: In his section, we will combine the above three sections of code (HTML, CSS, and jQuery) to create a follow-spot effect.