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 : 100 vh; 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 > < 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 > |
Output: