CODEWITHSUNDEEP
javascripthtmlcss
tsvetoslav
tsvetoslav

Reputation: 13

smoothly changing backgrounds

In my original project I have the same function like reNewIt() but only with fadeIn() at the begining and it is called after document is loaded, the fadeIn effect (from opacity 0 to 1) is working just fine.

When I tried to make a button to change the background (first to make opacity 0 then change the image, then make opacity 1) I see in dev tools opacity is jumping from 1 to 0.98 and it doesnt work. Tried different solutions, but I think there is something I cannot understand with the setInterval. The idea is first to go full white, then change the img, to hide the loading time of the picture.

I've read posts and searched Google all day, can't make it work.. I can simply get some other code for that effect, but I really want to make it myself. (what is the point of copying when I want to learn) I'll be very pleased if someone can help me figure it out.

let images = {
img1: 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg',
img2: 'https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8ZGF3bnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80',
img3: 'https://images.ctfassets.net/hrltx12pl8hq/4plHDVeTkWuFMihxQnzBSb/aea2f06d675c3d710d095306e377382f/shutterstock_554314555_copy.jpg',
img4: 'https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014__340.jpg'
}




function reNewIt() {
  let opacity = 1;
  let elem = document.getElementById('bgimage');
  let num = Math.ceil(Math.random() * 4);

  fadeOut();
  elem.style.backgroundImage = `url(${images['img'+ num ]})`;
  fadeIn();


  function fadeIn() {
    let id = 0;
    id = setInterval(frameIn, 20);
    function frameIn() {
      opacity += 0.02;
      elem.style.opacity = opacity;
    }
  }

  function fadeOut() {
    let id = 0;
    id = setInterval(frameOut, 20);
    function frameOut() {
      opacity -= 0.02;
      elem.style.opacity = opacity;
    }
  }
}
#bgimage {
    opacity: 1;
    height: 200px;
    width: 1000px;
  border: 1px solid red;
  color:red;
}
<html>
<head>
</head>
<body>
<div id="bgimage">
  <button onclick="reNewIt()">Click me</button>
</div>
</body>
</html>

Upvotes: 1

Views: 50

Answers (1)

Evren
Evren

Reputation: 4410

You can add transition to your css

let images = {
img1: 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg',
img2: 'https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8ZGF3bnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80',
img3: 'https://images.ctfassets.net/hrltx12pl8hq/4plHDVeTkWuFMihxQnzBSb/aea2f06d675c3d710d095306e377382f/shutterstock_554314555_copy.jpg',
img4: 'https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014__340.jpg'
}




function reNewIt() {
  let opacity = 1;
  let elem = document.getElementById('bgimage');
  let num = Math.ceil(Math.random() * 4);

  fadeOut();
  elem.style.backgroundImage = `url(${images['img'+ num ]})`;
  fadeIn();


  function fadeIn() {
    let id = 0;
    id = setInterval(frameIn, 20);
    function frameIn() {
      opacity += 0.02;
      elem.style.opacity = opacity;
    }
  }

  function fadeOut() {
    let id = 0;
    id = setInterval(frameOut, 20);
    function frameOut() {
      opacity -= 0.02;
      elem.style.opacity = opacity;
    }
  }
}
#bgimage {
    opacity: 1;
    height: 200px;
    width: 1000px;
  border: 1px solid red;
  color:red;
   transition: 2s ease-out;
}
<html>
<head>
</head>
<body>
<div id="bgimage">
  <button onclick="reNewIt()">Click me</button>
</div>
</body>
</html>

Upvotes: 1

Related Questions