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.

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

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

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.

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

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

<!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 src="https://code.jquery.com/jquery-3.4.1.js"> 
    </script> 
  
    <style> 
        body { 
            margin: 0; 
            padding: 0; 
        } 
  
        section { 
            background: url( 
https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png); 
            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> 

Output:

My Personal Notes

Recommended Posts: