How to create followspot effect using HTML CSS and jQuery ?

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 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    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%;
     }
</style>

chevron_right


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.



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
  
    </script>
  
    <style>
        body {
            margin: 0;
            padding: 0;
        }
  
        section {
            background: url(
            position: relative;
            width: 100%;
            height: 100vh;
            background-size: cover;
        }
  
        .geeks {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
  
<body>
    <section>
        <div class="geeks"></div>
    </section>
  
    <script>
        $(document).mousemove(function (e) {
            var X = e.pageX;
            var Y = e.pageY;
            $(".geeks").css(
                "background",
                "radial-gradient(circle at " +
                X +
                "px " +
                Y +
                "px, transparent, #000 30%)"
            );
        });
    </script>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.