From this article you will know how to create flashlight effect using html, css and javascript. This kind of JavaScript flashlight effect you can easily create or add to your project if you have a basic understanding of JavaScript.
In the case of Flashlight Mouse Pointer, a color effect will appear when you move your mouse. Here I have kept the webpage black and the flashlight white. You can change the color as per your wish.
Flashlight Effect HTML CSS Javascript
The flashlight effect is a captivating visual element that adds a touch of interactivity to web pages. By mimicking the illumination of a flashlight, developers can engage users and create an immersive experience.
In this tutorial, we will explore how to implement the flashlight effect using HTML, CSS, and JavaScript.
See the Pen Untitled by Growthpanda (@Growthpanda) on CodePen.
Hope you like this Flashlight Hover Effect. In this project (Flashlight Effect With Javascript) I used some basic text. You can remove those texts when you use this design in your project.
Create a mousemove flashlight effect with JavaScript
Let’s now learn how to create this awesome flashlight effect using html css and javascript. First you create 3 files named index.html , style.css and index.js respectively. I have given all the codes below. You copy those codes and add them to your file.
Step 1: Flashlight Effect HTML Code
Start by creating the basic HTML structure for your webpage. Include a container for the flashlight effect, which can be a div or any other suitable element.
<div id="flashlight"></div>
<p>Lorem ipsum dolor...</p>
<p>Lorem ipsum dolor..</p>Step 2: Flashlight Effect CSS Code
Create a stylesheet (styles.css) to style the flashlight container and other necessary elements. Set the background color of the container to black, representing darkness. Customize the appearance of your content as desired.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
cursor: none;
}
p {
font-size: 1em;
text-align: justify;
line-height: 1.8em;
padding: 0.2em;
}
#flashlight {
--Xpos: 50vw;
--Ypos: 50vh;
}
#flashlight:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
pointer-events: none;
background: radial-gradient(
circle 9em at var(--Xpos) var(--Ypos),
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1)
);
}
@media screen and (max-width: 500px) {
body {
font-size: 14px;
}
}Step 3: Flashlight Effect JavaScript Code
Now, it’s time to implement the flashlight effect using JavaScript. Create a JavaScript file (script.js) and add the following code.
// Variables to store the initial mouse coordinates
let mouseX = 0;
let mouseY = 0;
// Get the reference to the flashlight element by its ID
let flashlight = document.getElementById("flashlight");
// Function to check if the device supports touch events
const isTouchDevice = () => {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
};
// Function to get the mouse or touch position and update the flashlight position
function getMousePosition(e) {
// Determine the appropriate coordinates based on the device type (mouse or touch)
mouseX = !isTouchDevice() ? e.pageX : e.touches[0].pageX;
mouseY = !isTouchDevice() ? e.pageY : e.touches[0].pageY;
// Set the custom properties in the CSS for the flashlight position
flashlight.style.setProperty("--Xpos", mouseX + "px");
flashlight.style.setProperty("--Ypos", mouseY + "px");
}
// Event listeners to call the getMousePosition function on mouse and touch movements
document.addEventListener("mousemove", getMousePosition);
document.addEventListener("touchmove", getMousePosition);
By combining HTML, CSS, and JavaScript, you can easily create a flashlight effect that enhances the visual appeal of your web page. Experiment with different styles and sizes to achieve the desired look for your flashlight effect.
Comment how you like this CSS flashlight effect. All the code of this project (Flashlight Effect with HTML, CSS and JavaScript) is in the button below.
What line sets the background to black and which is to the flashlight white? I see one, but not sure which does the other…?