Add Flashlight Effect
28 November, 2022
0
0
0
Contributors
I have taken the help of pre-built bootstrap template with Dark Background as it would be easy for me directly pitch-in to the CSS Effect.
CSS
Since we do not want the cursor to appear at any place on the screen, we are setting the property to none and declare 2 variables for X and Y co-ordinates.
For the flashlight, we can make use of radial-gradient and set it to circle and set the radius to our desired value. The larger the value, the area covered by light will be more.
I have also set the colours and opacity ranging from 0% to 100%
To have a sneak peek of how it should look, we can get some ideas here,
•
https://rgbacolorpicker.com/ - To have an idea on how RGBA works with Opacity
•
In the JavaScript, we are monitoring 2 events mousemove and touchmove for capturing events on web and touch devices respectively.