Html Question posted in
Some basic documentation can be found here.

Html – Is there a way in javascript to reduce the blur of an image in steps through a loop and a variable?

I am trying 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)';
}

Here the value of ‘str’ and hence ‘val’ changes everytime the function ‘check’ is run, but ‘blur(val)’ gives an error.

I was expecting that a variable can be used here. I also tried setProperty.
document.getElementById("img1").style.setProperty("blur", val);
but this also gives error.

What is the solution?
Also, how do you reduce the blur of a text or a image according to a timer. For example, if the initial blur is set to 60px, every passing second, the blur reduces by 1 px, and finally after 1 minute, entire text is clearly visible?

Tags:

2

Answers


  1. 0
    1. Use template literals (backtics) in the correct place, you have a loose one in your code
    2. Give the browser time to actually repaint
    3. Cache the element
    document.addEventListener('DOMContentLoaded', () => { // page lements are available
  let str = 60;
  let tId;
  const img = document.getElementById("img1")

  const check = () => {
    str -= 10;
    if (str < 0) {
      clearInterval(tId); // stop
      return;
    }
    let blur = `blur(${str}px)`;
    img.style.filter = blur;
    console.log(blur);
  }
  tId = setInterval(check, 1000); //loop
  check(); // run immediately
})
    #img1 {
  filter: blur(100px)
}
    <img id="img1" src="https://picsum.photos/200/300" />
    <img id="img1" src="https://picsum.photos/200/300" />

    Here is one where I guessed at what you wanted with a and b

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

  const check = () => {
    if (a < b) { // not sure what you want here, it can be deleted
      str -= 10;
      if (str < 0) {
        clearInterval(tId); // stop
        return;
      }
      let blur = `blur(${str}px)`;
      img.style.filter = blur;
      console.log(blur);
    }
    a--;
    b++;
  }
  tId = setInterval(check,1000); //loop
})
    #img1 { filter: blur(100px) }
    <img id="img1" src="https://picsum.photos/200/300" />
    Login or Signup to reply.
  2. 0

    Yes, but why not use a CSS transition instead? Simple and smooth.

    document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.i1').classList.toggle('blur')
})
    .i1 {
  display: block;
  margin-top: 14em;
  margin: 3em auto 0;
  transition: 2s;
}

.i1.blur {
  filter: blur(20px);
}
    wait for image to load, then <button>toggle blur</button>
<img class="i1" src="http://picsum.photos/300/100">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search