How to achieve lazy loading animation effect through javascript

I would like to ask everyone. I hope to make an effect. When the page is loaded, I can delay the transparency of the background for 2 seconds, and let the duck in the middle hide from the middle of the screen and slowly enlarge and appear.

But I have just learned javascript and CSS, and now I found a problem that the duck doesn’t seem to be enlarged from the center point. I don’t know why? In addition, I want to trigger the animation with a delay of two seconds after the page is loaded. Is this way of writing OK? Since I’m a beginner, I don’t know if this way of writing is correct?

Thanks for watching my question

let wrap = document.querySelector('.wrap');
let duck = document.querySelector('.duck');


window.onload = function() {
  setTimeout(change, 1000);
  // wrap.style.opacity = "0.6"
}

function change() {
  wrap.style.opacity = "0.6";
  wrap.transition = "1.2s";
  duck.style.transform = "scale(1.6)";
}

.wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1550757750-4ce187a65014?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.duck {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  transform: scale(1);
  transform-origin: center;
  transition: 1s;
}

<div class="wrap"></div>
<img class="duck" src="https://upload.cc/i1/2022/02/15/UB1kXd.png
" alt="">

Answer

Try to put the scale of duck to 0, or opacity of duck to 0 from the start, or apply css animation to .duck class. Not sure what are you trying to achieve.

Advertisement

Answer