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 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 = "Beginner" ></ 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 (Beginner.png); position : relative ; width : 100% ; height : 100 vh; background- size : cover; } .Beginner { 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; $( ".Beginner" ).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.
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 > < script src = "https://code.jquery.com/jquery-3.4.1.js" > </ script > < style > body { margin: 0; padding: 0; } section { background: url( "https://media.w3wiki.net/wp-content/cdn-uploads/Geek_logi_-low_res.png"); position: relative; width: 100%; height: 100vh; background-size: cover; } .Beginner { position: absolute; width: 100%; height: 100%; } </ style > </ head > < body > < section > < div class = "Beginner" ></ div > </ section > < script > $(document).mousemove(function (e) { let X = e.pageX; let Y = e.pageY; $(".Beginner").css( "background", "radial-gradient(circle at " + X + "px " + Y + "px, transparent, #000 30%)" ); }); </ script > </ body > </ html > |
Output:
Contact Us