Blur effect in CSS and JavaScript applied around the cursor

Question

Blur effect in CSS and JavaScript applied around the cursor

I am embarking on the journey of creating a website completely from scratch using html, css, and js with jQuery and other necessary libraries. My goal is to have all the code easily transferable and executable without the need for additional plugins or scripts. To achieve this, I have all required libraries (bootstrap, jQuery, and Vague.js) downloaded in a single folder for plug-and-play convenience.

On one of my pages, I have multiple images moving in a carousel-like fashion. These images dominate the page, with only the logo and menu buttons appearing alongside them. I am trying to implement a special effect where the screen/images are blurred out, leaving only a small circle around the cursor visible. While I have succeeded in blurring all the images and focusing them when the mouse hovers over them, I am struggling to isolate a specific portion of the image for focus.

Admittedly, my current method may not be the most efficient way to approach this issue. In order to smoothly operate the carousel across multiple pages, I had to duplicate all images and apply a CSS transform operation with keyframes to move them by -50%. This aspect could certainly be improved upon and can be disregarded for now. The snippet of code I currently have is as follows:

<div class="scrollWrapper">
        <div id="scroll" class="imgScroll" onclick="toggleAnimation();">
            <img class="scrollingImage" src="image1.jpg" alt="Window showcase image">
          <!-- Additional image tags here -->
        </div>
    </div>

My latest idea involves blurring the div element with the class "scrollWrapper" and figuring out a way to highlight the area around the cursor. However, I am at a loss as to how to proceed with this approach.

I have explored various resources, including this post, but most solutions seem tailored for static images rather than the dynamic ones in my carousel setup. I am currently experimenting with Vague.js but have yet to find a solution that addresses my specific needs.

As someone who is relatively new to web development and has limited experience with JavaScript/jQuery, I must admit that I am feeling frustrated by my inability to solve this challenge. Before considering a complete overhaul of my approach, any assistance or guidance would be greatly appreciated.

javascript html jquery css

Answer 1

Answer №1

Applying the latest CSS backdrop-filter feature can be easily achieved, with the main challenge being creating a cutout in the filter.

Thankfully, there's always Stack Overflow for guidance.

For a circular shape, using a radial-gradient as a mask-image is likely the simplest method, demonstrated in this solution.

const blur_elem = document.getElementById( "blur-around" );
document.onmousemove = (evt) => {
  blur_elem.style.transform = `translate(${evt.clientX}px, ${evt.clientY}px)`;
};

#blur-around {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  /* covering the viewport fully */
  width: 200vw;
  height: 200vh;
  /* offset to cover full viewport */
  left: -100vw;
  top: -100vh;
  /* using transform translate to move it */
  transform-origin: center;  
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  -webkit-mask-image: radial-gradient(50px at 50% 50%, transparent 100%, black 100%);
  mask-image: radial-gradient(50px at 50% 50% , transparent 100%, black 100%)
}

/* fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(0px)) or (-webkit-backdrop-filter: blur(0px))) {
  #blur-around {
    background-color: rgba(255,255,255,.8);
  }
}

<div id="blur-around"></div>
<p>Works over any content</p>
<img src="https://picsum.photos/250/250">
<img src="https://picsum.photos/360/200">

Unfortunately, Safari doesn't fully support the mask-image property, requiring an alternative approach.

CSS clip-path with an evenodd path can also be used, demonstrated in this particular answer.

Chrome still lacks support for the path() function in clip-path, necessitating utilization of the polygon() function and defining each vertex point when creating shapes like rectangles, making sure to close both outer and inner shapes properly.

const blur_elem = document.getElementById( "blur-around" );
document.onmousemove = (evt) => {
  blur_elem.style.transform = `translate(${evt.clientX}px, ${evt.clientY}px)`;
};

#blur-around {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  /* covering the viewport fully */
  width: 200vw;
  height: 200vh;
  /* offset to cover full viewport */
  left: -100vw;
  top: -100vh;
  /* using transform translate to move it */
  transform-origin: center; 
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);

  --rect-size: 100px;
  clip-path: polygon( evenodd,
    /* outer rect */
    0 0,
    100% 0,
    100% 100%,
    0% 100%,
    0 0,
    /* inner rect */
    calc(50% - var(--rect-size) / 2) calc(50% - var(--rect-size) / 2),
    calc(50% + var(--rect-size) / 2) calc(50% - var(--rect-size) / 2),
    calc(50% + var(--rect-size) / 2) calc(50% + var(--rect-size) / 2),
    calc(50% - var(--rect-size) / 2) calc(50% + var(--rect-size) / 2),
    calc(50% - var(--rect-size) / 2) calc(50% - var(--rect-size) / 2)
   );
}

/* fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(0px)) or (-webkit-backdrop-filter: blur(0px))) {
  #blur-around {
    background-color: rgba(255,255,255,.8);
  }
}

<div id="blur-around"></div>
<p>Works over any content</p>
<img src="https://picsum.photos/250/250">
<img src="https://picsum.photos/360/200">

Creating a circle (as mentioned in comments) can become less straightforward, but a JavaScript generator can help facilitate this process:

function makeCircleHoleClipPathRule( radius ) {

  const inner_path = [];
  const circumference = Math.PI * radius;
  const step = Math.PI * 2 / circumference;
  const start_step = circumference * (5 / 8);
  for( let i = start_step; i < circumference + start_step; i++ ) {
    const angle = step * i;
    const x = radius * Math.cos( angle );
    const y = radius * Math.sin( angle );
    const str = `calc( 50% + ${ x }px ) calc( 50% + ${ y }px )`;
    inner_path.push( str );
  }
  inner_path.push( inner_path[ 0 ] );

  return `polygon( evenodd,
    0 0,
    100% 0,
    100% 100%,
    0% 100%,
    0 0,
    ${ inner_path.join( "," ) }
   )`;

}

const blur_elem = document.getElementById( "blur-around" );
blur_elem.style.clipPath = makeCircleHoleClipPathRule( 50 );

document.onmousemove = (evt) => {
  blur_elem.style.transform = `translate(${evt.clientX}px, ${evt.clientY}px)`;
};

#blur-around {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  /* covering the viewport fully */
  width: 200vw;
  height: 200vh;
  /* offset to cover full viewport */
  left: -100vw;
  top: -100vh;
  /* using transform translate to move it */
  transform-origin: center;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}
/* fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(0px)) or (-webkit-backdrop-filter: blur(0px))) {
  #blur-around {
    background-color: rgba(255,255,255,.8);
  }
}

<div id="blur-around"></div>
<p>Works over any content</p>
<img src="https://picsum.photos/250/250">
<img src="https://picsum.photos/360/200">

Currently, backdrop-filter works only in the latest Blink + Webkit browsers, with Gecko lacking support. In absence of many cross-browser solutions, consider using this polyfill which duplicates page content in an iframe (less optimal performance).

Answer 2

Applying the latest CSS backdrop-filter feature can be easily achieved, with the main challenge being creating a cutout in the filter.

Thankfully, there's always Stack Overflow for guidance.

For a circular shape, using a radial-gradient as a mask-image is likely the simplest method, demonstrated in this solution.

const blur_elem = document.getElementById( "blur-around" );
document.onmousemove = (evt) => {
  blur_elem.style.transform = `translate(${evt.clientX}px, ${evt.clientY}px)`;
};

#blur-around {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  /* covering the viewport fully */
  width: 200vw;
  height: 200vh;
  /* offset to cover full viewport */
  left: -100vw;
  top: -100vh;
  /* using transform translate to move it */
  transform-origin: center;  
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  -webkit-mask-image: radial-gradient(50px at 50% 50%, transparent 100%, black 100%);
  mask-image: radial-gradient(50px at 50% 50% , transparent 100%, black 100%)
}

/* fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(0px)) or (-webkit-backdrop-filter: blur(0px))) {
  #blur-around {
    background-color: rgba(255,255,255,.8);
  }
}

<div id="blur-around"></div>
<p>Works over any content</p>
<img src="https://picsum.photos/250/250">
<img src="https://picsum.photos/360/200">

Unfortunately, Safari doesn't fully support the mask-image property, requiring an alternative approach.

CSS clip-path with an evenodd path can also be used, demonstrated in this particular answer.

Chrome still lacks support for the path() function in clip-path, necessitating utilization of the polygon() function and defining each vertex point when creating shapes like rectangles, making sure to close both outer and inner shapes properly.

const blur_elem = document.getElementById( "blur-around" );
document.onmousemove = (evt) => {
  blur_elem.style.transform = `translate(${evt.clientX}px, ${evt.clientY}px)`;
};

#blur-around {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  /* covering the viewport fully */
  width: 200vw;
  height: 200vh;
  /* offset to cover full viewport */
  left: -100vw;
  top: -100vh;
  /* using transform translate to move it */
  transform-origin: center; 
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);

  --rect-size: 100px;
  clip-path: polygon( evenodd,
    /* outer rect */
    0 0,
    100% 0,
    100% 100%,
    0% 100%,
    0 0,
    /* inner rect */
    calc(50% - var(--rect-size) / 2) calc(50% - var(--rect-size) / 2),
    calc(50% + var(--rect-size) / 2) calc(50% - var(--rect-size) / 2),
    calc(50% + var(--rect-size) / 2) calc(50% + var(--rect-size) / 2),
    calc(50% - var(--rect-size) / 2) calc(50% + var(--rect-size) / 2),
    calc(50% - var(--rect-size) / 2) calc(50% - var(--rect-size) / 2)
   );
}

/* fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(0px)) or (-webkit-backdrop-filter: blur(0px))) {
  #blur-around {
    background-color: rgba(255,255,255,.8);
  }
}

<div id="blur-around"></div>
<p>Works over any content</p>
<img src="https://picsum.photos/250/250">
<img src="https://picsum.photos/360/200">

Creating a circle (as mentioned in comments) can become less straightforward, but a JavaScript generator can help facilitate this process:

function makeCircleHoleClipPathRule( radius ) {

  const inner_path = [];
  const circumference = Math.PI * radius;
  const step = Math.PI * 2 / circumference;
  const start_step = circumference * (5 / 8);
  for( let i = start_step; i < circumference + start_step; i++ ) {
    const angle = step * i;
    const x = radius * Math.cos( angle );
    const y = radius * Math.sin( angle );
    const str = `calc( 50% + ${ x }px ) calc( 50% + ${ y }px )`;
    inner_path.push( str );
  }
  inner_path.push( inner_path[ 0 ] );

  return `polygon( evenodd,
    0 0,
    100% 0,
    100% 100%,
    0% 100%,
    0 0,
    ${ inner_path.join( "," ) }
   )`;

}

const blur_elem = document.getElementById( "blur-around" );
blur_elem.style.clipPath = makeCircleHoleClipPathRule( 50 );

document.onmousemove = (evt) => {
  blur_elem.style.transform = `translate(${evt.clientX}px, ${evt.clientY}px)`;
};

#blur-around {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  /* covering the viewport fully */
  width: 200vw;
  height: 200vh;
  /* offset to cover full viewport */
  left: -100vw;
  top: -100vh;
  /* using transform translate to move it */
  transform-origin: center;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}
/* fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(0px)) or (-webkit-backdrop-filter: blur(0px))) {
  #blur-around {
    background-color: rgba(255,255,255,.8);
  }
}

<div id="blur-around"></div>
<p>Works over any content</p>
<img src="https://picsum.photos/250/250">
<img src="https://picsum.photos/360/200">

Currently, backdrop-filter works only in the latest Blink + Webkit browsers, with Gecko lacking support. In absence of many cross-browser solutions, consider using this polyfill which duplicates page content in an iframe (less optimal performance).

Blur effect in CSS and JavaScript applied around the cursor

Answer №1

Similar questions

Passing refs in React can be achieved by using sibling components. By passing a

What strategies can I use to solve this JavaScript puzzle?

Tips for sending data to CSS in Angular

Navigating the maze of Express.js routes

Sending information from the parent component to the child Bootstrap Modal in Angular 6

Connecting node.js to a MySQL database on a WAMP/XAMPP server: A step-by-step guide

Different Approach to Guarantee API

Backbone "recalling" stored data in attributes

You are unable to select the element in IE if there is an image in the background

What is the best way to store dropdown values from a PHP foreach loop into local storage?

Checking for undefined values in fields within an array of objects using scenarios in JavaScript

Obtaining Texture Map coordinates from an Object's surface in Three.js

Newbie mishap: Utilizing an array retrieved from a function in javascript/jquery

Can anyone provide guidance on how to calculate the total sum of a JavaScript array within an asynchronous function?

Incorporating dynamic variables into Angular: A beginner's guide

Styles coded in CSS are not reflecting on the displayed webpage, despite being visible in the Integrated

Various CSS libraries offer a range of design options, including DataTables and Bootstrap

Navigating through the map function within Protractor

Tips for getting my scripts to function properly with my components in next.js?

Tips for converting numbers in JavaScript and troubleshooting issues when trying to filter out non-numeric characters using Tel input commands