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.
<!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.
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%;
}
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.
$(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.
<!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) {
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:
