Flashlight Effect With Javascript

6th September 2022

2483

Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a flashlight effect. To build this effect, we need HTML, CSS and Javascript.

This is a beginner-friendly javascript project. If you are looking for more projects to improve your Javascript skills, you can check out this playlist here. This playlist consists of 100+ javascript projects. The difficulty level of these projects varies from simple to quite complex. Hence this playlist is suitable for all kinds of javascript learners including beginners and experts.

Video Tutorial:

If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out the video down below. Also, subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.

Project Folder Structure:

Before we start coding, let us create the project folder structure. We create a project folder called – ‘Flashlight Effect’. Within this folder, we have three files. These files are index.html, style.css and script.js. The first file is the HTML document, next we have the stylesheet and finally, we have our script file.

HTML:

We begin with the HTML file. The HTML file consists of a div with id – ‘flashlight’. First, copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flashlight Effect</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet-->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="flashlight"></div>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. A quibusdam at
      consequuntur, nisi omnis sapiente similique enim totam quisquam atque
      laboriosam! Officia quam dolore necessitatibus obcaecati ab possimus! Qui,
      eligendi nostrum, dicta totam cupiditate consequatur molestias laborum
      illum unde praesentium consequuntur quos culpa mollitia? Iusto delectus
      nobis totam tenetur rem. Veritatis saepe fuga nihil ipsum illum provident
      sit asperiores totam eum.
    </p>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam placeat
      nam impedit quis, molestiae quae maxime nisi nulla nesciunt cupiditate
      ipsum doloremque, consequatur porro voluptatibus voluptatem distinctio,
      perspiciatis rerum aliquam deleniti quibusdam ad odit laudantium natus
      minima. Veritatis error facilis voluptatem nesciunt beatae, voluptas
      totam, expedita ab, cupiditate quibusdam voluptates similique blanditiis
      eius vero aperiam aliquam dicta labore.
    </p>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, vel
      adipisci sequi praesentium maiores doloremque. Nemo qui enim culpa! Ab
      voluptates rem nihil atque. Quibusdam architecto et laborum culpa dicta!
    </p>
    <!--Script-->
    <script src="script.js"></script>
  </body>
</html>

CSS:

Next, we style this div to cover the whole page with a black background and create a light effect. For this copy, the code provided to you below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  cursor: none;
}
p {
  font-size: 1em;
  text-align: justify;
  line-height: 2em;
  padding: 0 2em;
  margin-bottom: 1em;
}
#flashlight {
  --Xpos: 50vw;
  --Ypos: 50vh;
}
#flashlight:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background: radial-gradient(
    circle 9em at var(--Xpos) var(--Ypos),
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1)
  );
}
@media screen and (min-width: 800px) {
  body {
    font-size: 24px;
  }
}

Javascript:

Finally, we add functionality to this code using Javascript. Once again copy the code below and paste it into your script file. The javascript code updates the mouse position on mouse move. We place the circle in a radial gradient based on this position.

let mouseX = 0;
let mouseY = 0;
let flashlight = document.getElementById("flashlight");

//Detect touch device
const isTouchDevice = () => {
  try {
    //We try to create TouchEvent(it would fail for desktops and throw error)
    document.createEvent("TouchEvent");
    return true;
  } catch (e) {
    return false;
  }
};

function getMousePosition(e) {
  mouseX = !isTouchDevice() ? e.pageX : e.touches[0].pageX;
  mouseY = !isTouchDevice() ? e.pageY : e.touches[0].pageY;

  flashlight.style.setProperty("--Xpos", mouseX + "px");
  flashlight.style.setProperty("--Ypos", mouseY + "px");
}

document.addEventListener("mousemove", getMousePosition);
document.addEventListener("touchmove", getMousePosition);

That’s it for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Also if you have queries, suggestions and feedback you can comment below.
Happy Coding!

3D Rotating Image Cube Animation