0

I have an background image of a building (taken many many years ago). After 5 seconds I would like to fade in a second background image of the same building (up to date picture). Keeping the second background picture until the page is reloaded. Is this possible with CSS, javascript, and jquery and the lazyload plugin?

Scott Wissler
  • 11
  • Yes it is possible. Now what? Do you want a code example? – Marcus Rommel Jul 04 '15 at 08:13
  • 1
    you could do it with css alone, javascript alone - jQueery bloat is up to you, if you're already using jQueery, then no problem, but don't bloat your page with jQueery for something this simple – Jaromanda X Jul 04 '15 at 08:14
  • does this help http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations – Jaromanda X Jul 04 '15 at 08:48

2 Answers2

0

I tried to make it done without JavaScript.

CSS looks like:

body {
    background: url('path_to_your_background_image_1');
    animation: change_background 1s ease-out 5s 1 forwards;
}

@keyframes change_background {
    to {
        background-image: url('path_to_your_background_image_2');
    }
}

Here's an example http://jsfiddle.net/u9jw7k5q/1/

Slimmi
  • 301
  • 1
  • 4
  • works in chrome, doesn't work in firefox, internet exploder and other browsers not tested – Jaromanda X Jul 04 '15 at 08:46
  • @JaromandaX you should add -webkit-, -moz-, and -o- prefixes. But keep in mind this is for modern browsers. If you want support old browsers, then you want to use JavaScript. – Slimmi Jul 04 '15 at 08:50
  • it DOESN'T work in firefox, which DOESN'T need -moz- prefix for animations – Jaromanda X Jul 04 '15 at 08:52
0

Here is the JS + CSS solution to this. This might help you.(tested in Chrome)

var timer;

function swapImage() {
  var slide = document.getElementById('slide');
  slide.className = "fade-in";
  slide.src = "http://www.w3schools.com/images/w3cert.gif";
  clearTimeout(timer);
}
timer = setTimeout("swapImage()", 5000);
@keyframes fadeIn {
to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn .5s ease-in 1 forwards;
}
<img height="200" id="slide" src="http://www.w3schools.com/html/html5.gif" width="400" />
sanket joshi
  • 43
  • 4