Tips for creating a webpage with a spotlight effect using the mouse cursor

Question

Tips for creating a webpage with a spotlight effect using the mouse cursor

My goal is to create a webpage that is completely dark (as in night without any light at all) and have the mouse cursor emit a light effect to illuminate the surroundings. What tools or techniques should I use to achieve this unique effect? I've searched for solutions in CSS and on the internet, but have not come across anything similar. The only option I found is this WordPress plugin, however it is fixed and does not allow for customization.

css effects lighting flashlight light

Answer 1

Answer №1

Although this thread is older, I found it intriguing and decided to create my own version of the effect. Check out my implementation on jsfiddle to see how I approached it.

You can view the code directly on jsfiddle, along with detailed explanations on how everything works. It's all fairly straightforward.

HTML Structure

I started by creating a div with the id light, followed by a wrapper div named content containing placeholder text (lorum ipsum).

<div id="light"></div>

<div class="content"gt;  
    <h1>Flashlight test</h1>   
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas...</p>
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
    </ul>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas...</p>
    
</div>

CSS Styling

In terms of styling, I first targeted the html element to set black text and background for default hiding purposes.

Then, I customized the div with the light id - making it 100px x 100px, yellow background, and circular using border-radius. The position was set as relative to allow layering over other elements. To give a default flashlight position before user interaction, I centered it on the page using top and left properties.

Lastly, I added rules to the content wrapper div, setting its position: relative and z-index: 10. This stacking order ensures the content appears above the light div due to the contrasting backgrounds.

html { 
    color: #000; 
    background-color: #000; 
}

.content {
    position: relative;
    z-index: 10;
}

#light {
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    background-color: rgb(231, 221, 122);
}

Javascript Logic

The javascript component consists of a short jQuery script spanning only 6 lines. It utilizes the mousemove() event function to update the element's offset based on mouse coordinates, effectively centering the light around the cursor and achieving the desired effect.

$(document).mousemove(function(event) {
    $('#light').offset({
        top: event.pageY - 50,
        left: event.pageX - 50
    });
});

Update with Modern Approach

Applying the same concept but leveraging newer coding practices, here's an updated version using vanilla techniques and features that were unavailable at the time of the initial response.

For a live demo, visit: https://codepen.io/bronzehedwick/pen/oNdRwYN

Modern HTML

<div id="light" style="--light-position-y: 0; --light-position-x: 0"></div>
<div class="content">
  <h1>Flashlight test</h1>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas...</p>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
  </ul>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas...</p>
</div>

Enhanced CSS

body {
  background-color: black;
}

.content {
  position: relative;
  z-index: 10;
}

#light {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  transform: translate(var(--light-position-x, 0px), var(--light-position-y, 0px));
  background-color: rgb(231, 221, 122);
}

Revised JavaScript

var light = document.getElementById('light');

document
  .documentElement
  .addEventListener('mousemove', function handleMouseMove(event) {
    light.style.setProperty('--light-position-y', (event.clientY - 50) + 'px');
    light.style.setProperty('--light-position-x', (event.clientX - 50) + 'px');
  });

Answer 2

Although this thread is older, I found it intriguing and decided to create my own version of the effect. Check out my implementation on jsfiddle to see how I approached it.

You can view the code directly on jsfiddle, along with detailed explanations on how everything works. It's all fairly straightforward.

HTML Structure

I started by creating a div with the id light, followed by a wrapper div named content containing placeholder text (lorum ipsum).

<div id="light"></div>

<div class="content"gt;  
    <h1>Flashlight test</h1>   
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas...</p>
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
    </ul>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas...</p>
    
</div>

CSS Styling

In terms of styling, I first targeted the html element to set black text and background for default hiding purposes.

Then, I customized the div with the light id - making it 100px x 100px, yellow background, and circular using border-radius. The position was set as relative to allow layering over other elements. To give a default flashlight position before user interaction, I centered it on the page using top and left properties.

Lastly, I added rules to the content wrapper div, setting its position: relative and z-index: 10. This stacking order ensures the content appears above the light div due to the contrasting backgrounds.

html { 
    color: #000; 
    background-color: #000; 
}

.content {
    position: relative;
    z-index: 10;
}

#light {
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    background-color: rgb(231, 221, 122);
}

Javascript Logic

The javascript component consists of a short jQuery script spanning only 6 lines. It utilizes the mousemove() event function to update the element's offset based on mouse coordinates, effectively centering the light around the cursor and achieving the desired effect.

$(document).mousemove(function(event) {
    $('#light').offset({
        top: event.pageY - 50,
        left: event.pageX - 50
    });
});

Update with Modern Approach

Applying the same concept but leveraging newer coding practices, here's an updated version using vanilla techniques and features that were unavailable at the time of the initial response.

For a live demo, visit: https://codepen.io/bronzehedwick/pen/oNdRwYN

Modern HTML

<div id="light" style="--light-position-y: 0; --light-position-x: 0"></div>
<div class="content">
  <h1>Flashlight test</h1>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas...</p>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
  </ul>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas...</p>
</div>

Enhanced CSS

body {
  background-color: black;
}

.content {
  position: relative;
  z-index: 10;
}

#light {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  transform: translate(var(--light-position-x, 0px), var(--light-position-y, 0px));
  background-color: rgb(231, 221, 122);
}

Revised JavaScript

var light = document.getElementById('light');

document
  .documentElement
  .addEventListener('mousemove', function handleMouseMove(event) {
    light.style.setProperty('--light-position-y', (event.clientY - 50) + 'px');
    light.style.setProperty('--light-position-x', (event.clientX - 50) + 'px');
  });

Tips for creating a webpage with a spotlight effect using the mouse cursor

Answer №1

HTML Structure

CSS Styling

Javascript Logic

Update with Modern Approach

Modern HTML

Enhanced CSS

Revised JavaScript

Similar questions

When the text exceeds the designated block, it will be fragmented

Being required to design a distinct div for every article I am extracting from the API

What is the method for superimposing a div with a see-through input field?

Explore our interactive map and widget features that will seamlessly fill your browser window for a

How come only the individual top, bottom, left and right paddings function correctly while the combined padding does not respond?

The caption below the image is not functioning correctly when hovering over it

Is there a way to remove text from a div when the div width is reduced to 0?

What could be causing justify-content: flex-start; to not function as expected?

Enhance each category changing with jQuery page transitions

How can I wrap text in Angular for better readability?

The sidebar stays fixed in place and doesn't adapt to varying screen resolutions

Pressing the reset button will restore the table to its original

The Oracle Apex Login Interface with a Touch of Customized Styling

I plan to compile a collection of names in a text field and then have the ability to select and access each name individually with just a click

How to align buttons in the center of a Bootstrap grid column using Angular's *ngFor directive

Unclear when notifying div content

CSS @page does not render content within @top-center, @bottom-right, and similar positions

Creating a scrollable card layout specifically for small screens in HTML

Synchronization issue between CSS style and Javascript is causing discrepancies

What could be causing this strange striping effect in the radial gradient?