Changing background picture smoothly

Question

I`m using the code to change background picture over time:

function getRandomInt(min, max)
{return Math.floor(Math.random()*(max-min+1))+min;}

function nextBackground()
{
    var url = "url('images/" + getRandomInt(1, 33) + ".jpg')";

    $body.css("background-image", url);
    setTimeout(nextBackground, 7000);
}
setTimeout(nextBackground, 7000);

But I would like pictures to change not that sharply. Are there any way to do that?

score 0 · Answer 1 · answered Feb 07 '17 at 21:14

0

You could use CSS animationns with an animatable property... but this one isn't. The answers to this question should help you solve your problem, basically you should put your image behind the other one and turn the opacity of the old one up to 100% smoothly.

Hope it helped :)

answered Feb 07 '17 at 21:14

Magix

4,989
7
26
50

Overlay is not needed. Just CSS transition. – Scott Marcus Feb 07 '17 at 21:34

score 0 · Accepted Answer · answered Feb 07 '17 at 21:14

0

If you use timing events with two overlaid images and have the opacity adjust slowly from 1 to 0, that should work for you I think.

This may be useful.

answered Feb 07 '17 at 21:14

Erasyn

38
1
4

Overlay is not needed. Just CSS transition. – Scott Marcus Feb 07 '17 at 21:34

Scott Marcus · Answer 3 · 2017-02-07T21:26:49.880

You can fade the next image in by transitioning the property. Here's an example stripped down to the basics that does it on the background of a <div>, but you can change it to the background of the document, simply by changing the selector used in the nextBackground() function.

// If you put all the image paths into an array, the rest of the code gets much simpler
var images = ["https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png",
              "https://www.brandsoftheworld.com/sites/default/files/styles/logo-thumbnail/public/062012/twitter-bird-light-bgs.png?itok=HAQz1yQN",
              "http://seeklogo.com/images/L/linkedin-icon-logo-05B2880899-seeklogo.com.gif",
             "https://www.youtube.com/yt/brand/media/image/YouTube-logo-full_color.png",
             "http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram_App_Large_May2016_200.png",
             "http://lescalier-montreal.com/restaurant-bar/wp-content/uploads/2014/07/small-red-googleplus-icon.png"];

function getRandomInt() {
  // No longer need min and max parameters, just the length of the array
  return Math.floor(Math.random() * images.length);
}

function nextBackground(){
  $("div").css("background-image", "url(" + images[getRandomInt()] + ")");
}

// For a continuously running timer, user setInterval, instead of setTimeout
setInterval(nextBackground, 1250);

div { 
  background-size:contain;
  /* 
    CSS transitions cause properties that change to transition to the new value
    There are numererous ways to configure the transition, but here, we're just
    saying that any properties that change on the div should take 1 second to transition
    from the old value to the new value.
  */
  transition:1s; 
  height:250px;
  width:250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Just change the selector used in the `nextBackground()` function to: `$("body")` and the CSS selector to `body`. I only did it with a `
` here so it would fit into the snippet window. Don't forget to up vote and mark this as the answer. Good luck! — Scott Marcus, Feb 07 '17 at 21:21

Changing background picture smoothly

3 Answers3