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.
CSS Code: The CSS property is used to set the style to the image.
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.
Complete Code: In his section, we will combine the above three setions of code (HTML, CSS, and jQuery) to create a follow-spot effect.
- How to create slide left and right toggle effect using jQuery?
- How to Create Floating Box Effect using HTML and CSS ?
- Create a 3D Text Effect using HTML and CSS
- How to Create Engraved Text Effect using HTML and CSS ?
- How to create text-reveal effect using HTML and CSS ?
- How to create Skewed Background with hover effect using HTML and CSS?
- How to Create Liquid Filing Effect on Text using HTML and CSS ?
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- How to Create an Effect to Change Button Color using HTML and CSS ?
- How to create shock wave or explosion effect using HTML and CSS ?
- How to Create Text Reveal Effect for Buttons using HTML and CSS ?
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- How to create paper corner fold effect on hover by using HTML and CSS?
- How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
- How to Create a GrayScale Effect using CSS ?
- How to Create Paradoxical Effect using CSS ?
- jQuery UI | effect() Method
- How to use Explode effect in jQuery ?
- How to create a bouncing bubble effect using CSS ?
- How To Create Carved Text Effect using CSS?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.