Is it possible to gradually decrease the blur of an image in JavaScript using a loop and a variable?

Question

Is it possible to gradually decrease the blur of an image in JavaScript using a loop and a variable?

I'm experimenting with something like this:

let str = 10;
let blu = "px";
let val = "";

function check() {
    if(a < b){
    str = str - 6;
    if (str<0){str = 0}
    val = str+blu;
    document.getElementById("img1").`style.filter = 'blur(val)';
}

The value of 'str' and therefore 'val' changes every time the function 'check' is executed, but 'blur(val)' results in an error.

I was under the impression that a variable could be used here. I also attempted using setProperty.

document.getElementById("img1").style.setProperty("blur", val);

but this also led to an error.

What would be the solution? Also, how can you gradually reduce the blur effect on text or an image based on a timer? For instance, if the initial blur is set to 60px, reduce the blur by 1px every second so that after 1 minute, the entire text becomes clear?

javascript html css image blur

Answer 1

Answer №1

Why not consider implementing a CSS transition for a smoother effect instead of using JavaScript? It's simple and elegant.

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.image1').classList.toggle('blur')
})

.image1 {
  display: block;
  margin: 3em auto 0;
  transition: 2s;
}

.image1.blur {
  filter: blur(20px);
}

Wait for the image to load, then click on <button>toggle blur</button>
<img class="image1" src="http://picsum.photos/300/100">

Answer 2

Why not consider implementing a CSS transition for a smoother effect instead of using JavaScript? It's simple and elegant.

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.image1').classList.toggle('blur')
})

.image1 {
  display: block;
  margin: 3em auto 0;
  transition: 2s;
}

.image1.blur {
  filter: blur(20px);
}

Wait for the image to load, then click on <button>toggle blur</button>
<img class="image1" src="http://picsum.photos/300/100">

Answer 3

Answer №2

Utilize template literals (backticks) in the appropriate place, as there seems to be a stray one in your code
Allow the browser sufficient time to repaint the content
Optimize performance by caching the element

document.addEventListener('DOMContentLoaded', () => { // ensure page elements are loaded
  let str = 60;
  let tId;
  const img = document.getElementById("img1")

  const check = () => {
    str -= 10;
    if (str < 0) {
      clearInterval(tId); // stop interval
      return;
    }
    let blur = `blur(${str}px)`;
    img.style.filter = blur;
    console.log(blur);
  }
  tId = setInterval(check, 1000); //establish loop
  check(); // execute immediately
})

#img1 {
  filter: blur(100px)
}

<img id="img1" src="https://picsum.photos/200/300" />

<img id="img1" src="https://picsum.photos/200/300" />

In this portion, I made educated guesses about what you intended with variables a and b

document.addEventListener('DOMContentLoaded', () => { // when page elements are ready
  let str = 60;
  let a=10;
  let b=0;
  let tId;
  const img = document.getElementById("img1")

  const check = () => {
    if (a < b) { // unclear on this part, consider removing if not needed
      str -= 10;
      if (str < 0) {
        clearInterval(tId); // halt execution
        return;
      }
      let blur = `blur(${str}px)`;
      img.style.filter = blur;
      console.log(blur);
    }
    a--;
    b++;
  }
  tId = setInterval(check,1000); //run loop
})

#img1 { filter: blur(100px) }

<img id="img1" src="https://picsum.photos/200/300" />

Answer 4

Utilize template literals (backticks) in the appropriate place, as there seems to be a stray one in your code
Allow the browser sufficient time to repaint the content
Optimize performance by caching the element

document.addEventListener('DOMContentLoaded', () => { // ensure page elements are loaded
  let str = 60;
  let tId;
  const img = document.getElementById("img1")

  const check = () => {
    str -= 10;
    if (str < 0) {
      clearInterval(tId); // stop interval
      return;
    }
    let blur = `blur(${str}px)`;
    img.style.filter = blur;
    console.log(blur);
  }
  tId = setInterval(check, 1000); //establish loop
  check(); // execute immediately
})

#img1 {
  filter: blur(100px)
}

<img id="img1" src="https://picsum.photos/200/300" />

<img id="img1" src="https://picsum.photos/200/300" />

In this portion, I made educated guesses about what you intended with variables a and b

document.addEventListener('DOMContentLoaded', () => { // when page elements are ready
  let str = 60;
  let a=10;
  let b=0;
  let tId;
  const img = document.getElementById("img1")

  const check = () => {
    if (a < b) { // unclear on this part, consider removing if not needed
      str -= 10;
      if (str < 0) {
        clearInterval(tId); // halt execution
        return;
      }
      let blur = `blur(${str}px)`;
      img.style.filter = blur;
      console.log(blur);
    }
    a--;
    b++;
  }
  tId = setInterval(check,1000); //run loop
})

#img1 { filter: blur(100px) }

<img id="img1" src="https://picsum.photos/200/300" />

Is it possible to gradually decrease the blur of an image in JavaScript using a loop and a variable?

Answer №1

Answer №2

Similar questions

Steps to conceal an accordion upon loading the page and reveal it only when clicking on a specific element

"Incorporate a personalized dropdown menu (using the datatables plugin) in the designated design structure

Guide on making a dynamic table with HTML and CSS featuring square cells

Slide back with jQuery when a user clicks anywhere on the webpage

How can I include additional lines in a 3D model?

Combining two kebab-case CSS classes within a React component

The Ajax success or error message is only shown one time

Utilizing Immutable.js to handle state changes in React applications

Using conditional routing for nested routes in VueJS

Swap out HTML lists for a PHP array structure

Vue looping through nested checkbox groups

I'm looking to generate a semicircle progress bar using jQuery, any suggestions on how

Creating dynamic layouts using Handlebars.js recursion

In what way can I fill out my search fields using the criteria included in the URL?

Setting up an object with a set expiration using NodeJS and Mongoose

Is it possible to utilize THREE js ExtrudeGeometry to manipulate a shape along a jagged path?

Initiating a file download using HTML

Creating a customized SelectField component for Material-UI v1.0.0-alpha.21 with a fix for the Menu anchorEl problem

Issue with dropdown menu appearing beneath specific elements in Internet Explorer versions 7 and 8

What is the process for transforming a JSON string into an array?