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 : 100 vh;
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.
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 =
</ 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) {
let X = e.pageX;
let Y = e.pageY;
$(".geeks").css(
"background",
"radial-gradient(circle at " +
X +
"px " +
Y +
"px, transparent, #000 30%)"
);
});
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...