Full Background Image with Fade Effect

Full background image with fade effect

To make images fade in and out properly, one need to calculate percentages and timings for it to look good, as done below, or simply give each image a @keyframes rule of their own.

For "n" images you must define:

  • a=presentation time for one image
  • b=duration for cross fading
  • Total animation-duration is of course t=(a+b)*n

animation-delay = t/n or = a+b

Percentage for keyframes:

  1. 0%
  2. a/t*100%
  3. (a+b)/t*100% = 1/n*100%
  4. 100%-(b/t*100%)
  5. 100%

Src: http://css3.bradshawenterprises.com/cfimg/

.crossfade > div {  animation: imageAnimation 8s linear infinite;  backface-visibility: hidden;  background-size: cover;  background-position: center center;  color: transparent;  height: 100%;  left: 0;  position: fixed;  top: 0;  width: 100%;}.crossfade {  height: 500px;}@keyframes imageAnimation {  0% {    opacity:1;  }  17% {    opacity:1;  }  25% {    opacity:0;  }  92% {    opacity:0;  }  100% {    opacity:1;  }}
.crossfade div:nth-of-type(1) {  background-image: url(http://placehold.it/200/f00);  animation-delay: 6s;}.crossfade div:nth-of-type(2) {  background-image: url(http://placehold.it/200/0b0);  animation-delay: 4s;}.crossfade div:nth-of-type(3) {  background-image: url(http://placehold.it/200/00f);  animation-delay: 2s;}.crossfade div:nth-of-type(4) {  background-image: url(http://placehold.it/200/ff0);  animation-delay: 0;}
<div class="crossfade">  <div></div>  <div></div>  <div></div>  <div></div></div>

Change the body background image with fade effect in jquery

Re-UPDATE of the UPDATE:

Even NEWER Fiddle (without arguments.callee)

Changes:

  • Javascript improvements
  • CSS corrections (fits full page now)
  • Added option for random sequence of images instead of sequential
  • => Alternate version of NEWER Fiddle <= (if OP's img server is down)

BIG UPDATE

Took the meat of this code from this previous answer and added some bling (using my site background stash lol)

original fiddle :)

NEW Super Fiddle

Javascript:

$(document).ready(function () {
    var img_array = [1, 2, 3, 4, 5],
        newIndex = 0,
        index = 0,
        interval = 5000;
    (function changeBg() {

        //  --------------------------
        //  For random image rotation:
        //  --------------------------

            //  newIndex = Math.floor(Math.random() * 10) % img_array.length;
            //  index = (newIndex === index) ? newIndex -1 : newIndex;

        //  ------------------------------
        //  For sequential image rotation:
        //  ------------------------------

            index = (index + 1) % img_array.length;

        $('body').css('backgroundImage', function () {
            $('#fullPage').animate({
                backgroundColor: 'transparent'
            }, 1000, function () {
                setTimeout(function () {
                    $('#fullPage').animate({
                        backgroundColor: 'rgb(255,255,255)'
                    }, 1000);
                }, 3000);
            });
            return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';
        });
        setTimeout(changeBg, interval);
    })();
});

CSS:

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background-image: url(http://www.fleeceitout.com/images/field.2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-attachment: fixed;
}
#fullPage {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(255, 255, 255);
}

CSS fade-in background image

You would like to probably use opacity and fade-in effect.

div.header_element {
display: table-cell;
text-align: center;
vertical-align: middle;
}

div.header_element:hover {
background-position: center;
background-image: url("http://dummy-images.com/abstract/dummy-100x100-Rope.jpg");
background-repeat: no-repeat;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

See the jsfidle if it's what you wanted.

Responsive Background Image (animated fade loop) that will span full height of page content?

ITERATION 2 :

I couldn't make any of the methods found on SO to force an absolute div to take on the height of its parent (when that element's height is auto) work.

So, turning to putting the images as backgrounds on the the body itself, using a pseudo before element for images fading in and after for fading out it works. Body height is set to auto, but with min-height: 100vh.

BUT, it takes a lot of GPU, even more than (current at time of writing this) https://www.vortex42studios.com, so let's hope someone can come up with something better. Otherwise we are in danger of draining the user's mobile battery or their laptop scorching their knees.

* {
  margin: 0;
  padding: 0;
}
    body {
      height: auto;
      min-height: 100vh;
      width: auto;
      overflow: visible;
      position: relative;
    }
    body::before, body::after {
        display: inline-block;
        top: 0;
        left: 0;
        position: relative;
        position: absolute;
        content: '';
        animation: none 25s infinite ease;
        animation-fill-mode: forwards;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        z-index: -1;
        overflow: visible;
        background-size: cover;
        background-position: center center;
    }
    body::before {
      animation-name: fadein;
    }
    body::after {
        animation-name: fadeout;
    }
    @keyframes fadein {
      0% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG01_1080P.JPG);
      }
      20% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG01_1080P.JPG);
        }
      20.001% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG02_1080P.JPG);
        }
      40% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG02_1080P.JPG);
        }
      40.001% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG03_1080P.JPG);
        }
      60% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG03_1080P.JPG);
        }
      60.001% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG04_1080P.JPG);
        }
      80% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG04_1080P.JPG);
      }
      80.001% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG05_1080P.JPG);
        }  
      100% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG05_1080P.JPG);
        }
    }
    @keyframes fadeout {
      0% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG05_1080P.JPG);
      }
      20% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG05_1080P.JPG);
        }
      20.001% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG01_1080P.JPG);
        }
      40% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG01_1080P.JPG);
        }
      40.001% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG02_1080P.JPG);
        }
      60% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG02_1080P.JPG);
        }
      60.001% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG03_1080P.JPG);
        }
      80% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG03_1080P.JPG);
      }
      80.001% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG04_1080P.JPG);
        }  
      100% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG04_1080P.JPG);
        }
    }
    .wrap {
      height: auto;
      width: 100%;;
    }
<div class="wrap">some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br></div>

How to add fade in and fade out when changing background-image with javascript or jQuery

I modified your code just a bit to make this new version, that use Fade out / Fade In functions from here, using visibility CSS attribute. This will just make the image disappear, the background will be visible a moment, and then the new image will appear. There are many ways of doing a Fade effect, and this is one of them. You could want something else (for example, the image becomes black and then the new image appears). If you want to try another types of Fade, you can search through CSS filters list.

var urls = [
  'url(https://placekitten.com/g/350/150)',
  'url(https://placekitten.com/g/200/600)',
  'url(https://placekitten.com/g/550/250)',
  'url(https://placekitten.com/g/700/300)',
  'url(https://placekitten.com/g/300/550)',
  'url(https://placekitten.com/g/400/200)',
  'url(https://placekitten.com/g/350/750)'
];
var active = Math.floor(Math.random() * (urls.length));

setInterval(function() {
  let rand = Math.floor(Math.random() * 4);
  if (rand <= 2 && rand == document.getElementsByClassName('image')[0].getAttribute("data-changed")) {
    rand = rand + 1;
  } else if (rand == 2 && rand == document.getElementsByClassName('image')[0].getAttribute("data-changed")) {
    rand = rand - 1;
  }

  document.getElementsByClassName('image')[rand].classList.remove("visible");
  document.getElementsByClassName('image')[rand].classList.add("hidden");

  setTimeout(function(){
    document.getElementsByClassName('image')[rand].style.backgroundImage = urls[active];
    document.getElementsByClassName('image')[0].setAttribute("data-changed", rand);

    document.getElementsByClassName('image')[rand].classList.remove("hidden");
    document.getElementsByClassName('image')[rand].classList.add("visible");

  },400); // 400 ms because animation duration is 0.4s

  active++;
  if (active == urls.length) active = 0;
  //})
}, 2000);
.image {
  background-size: cover;
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

.one { 
  background-image: url(https://placekitten.com/g/350/150); 
}
.two { 
  background-image: url(https://placekitten.com/g/300/550); 
}
.three { 
  background-image: url(https://placekitten.com/g/400/200); 
}
.four { 
  background-image: url(https://placekitten.com/g/350/750); 
}

.visible {
      opacity: 1;
      transition: opacity 0.4s ease;
}

.hidden {
  opacity: 0;
  transition: opacity 0.4s ease;
}
<div class="image visible one"></div>
<div class="image visible two"></div>
<div class="image visible three"></div>
<div class="image visible four"></div>

However, this is not the best way of doing it. So I modified the code, and added some JQuery stuff.

var urls = [  'url(https://placekitten.com/g/350/150)',  'url(https://placekitten.com/g/200/600)',  'url(https://placekitten.com/g/550/250)',  'url(https://placekitten.com/g/700/300)',  'url(https://placekitten.com/g/300/550)',  'url(https://placekitten.com/g/400/200)',  'url(https://placekitten.com/g/350/750)'];
// Select the next image, may be one of the actual displayed imagesvar active = Math.floor(Math.random() * (urls.length));

setInterval(function() {  // Select randomnly the next div to change  var rand = Math.floor(Math.random() * 4);    // Store this list, so that we only make one call to the page  // equiv : document.getElementsByClassName('image')  let images = $('.image');    // equiv : images[0].getAttribute("data-changed")  let datachanged = images.attr("data-changed");    // This conditions work, but their is a better way of doing it. See comment below the snippet  if (rand <= 2 && rand == datachanged ) {    rand += 1;  } else if (rand >= 2 && rand == datachanged ) {    rand -= 1;  }
  // Jquery selector for the targetted div  let current = $('.image:nth-child('+(rand+1)+')');    // Now we can use JQuery methods, such as toggleClass  current.toggleClass("visible hidden");    // The fade effect takes 0.4ms, or 400ms  // So we use a setTimeout to change the bg in 400ms and not immediatly  // Once the background is changed, the "visible" class we be added  // If you want to change the duration, remember to also change it in the CSS  setTimeout(function(){      // equiv : images[rand].style.backgroundImage = urls[active];    current.css('background-image', urls[active]);            images[0].setAttribute("data-changed", rand);      current.toggleClass("hidden visible");    },400); // 400 ms because CSS animation duration is 0.4s
  // Change active value so that the background will not be same next time  active++;    // Faster way to write if(...) { active = 0 }  active = (active == urls.length) ? 0 : active ;  
}, 2000);
.image {  background-size: cover;  display: inline-block;  width: 200px;  height: 200px;  border: 1px solid red;  transition: opacity 0.4s ease;}
.one {   background-image: url(https://placekitten.com/g/350/150); }.two {   background-image: url(https://placekitten.com/g/300/550); }.three {   background-image: url(https://placekitten.com/g/400/200); }.four {   background-image: url(https://placekitten.com/g/350/750); }
.visible {      opacity: 1;}
.hidden {  opacity: 0;}
<!-- JQuery 3.3.1 --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>  <div class="image one" data-changed="0"></div>  <div class="image two"></div>  <div class="image three"></div>  <div class="image four"></div></div>

background picture slideshow with fade

Some generic issues

  • your media queries where not making any changes so i have removed them.
  • you were not using the fadi-in animation so i removed it
  • you had some extra } which i removed

Since you are using a single animation (you have to, since you are animating the same property) you need to time the animation along the whole duration of the animation (the time it takes for all images to fade in / out)

So you animation would be something like this

  • All start with opacity 0
  • slide fades in for 2 seconds and remains opaque for 6 seconds and fades out for another 2 second
  • the 2 seconds of fade out coincide with the 2 seconds of fade in of the next slide

So since you want 24 seconds for the whole slideshow (should be called fadeshow since we are not sliding anything) each 1 second of the keyframes is 4.1666% of the whole duration.

@keyframes fade-out {
  0% {opacity: 0;} /*start fading in*/
  8.333%{opacity:1} /*complete the fade in in 2 seconds*/
  33.333%{opacity:1} /*remain at opacity 1 until 8 seconds*/
  41.666% {opacity: 0;} /*fade out until 10 seconds*/
}

Full example

.banner ul.kf-slider {  list-style: none;  margin: 0;  padding: 0;}.banner ul.kf-slider li {  width: 300px;  height: 200px;  position: absolute;  top: 0;  left: 0;  opacity:0;    animation: fade-out 24s infinite;  background-image: url(https://dummyimage.com/300x200&text=Image1);}.banner ul.kf-slider li:nth-child(2) {  background-image: url(https://dummyimage.com/300x200&text=Image2);  animation-delay: 8s;}.banner ul.kf-slider li:nth-child(3) {  background-image: url(https://dummyimage.com/300x200&text=Image3);  animation-delay: 16s;}@keyframes fade-out {  0% {opacity: 0;}  8.333%{opacity:1}  33.333%{opacity:1}  41.666% {opacity: 0;}}
<section class="banner">  <!--List items for bg images -->  <ul class="kf-slider">    <li></li>    <li></li>    <li></li>  </ul></section>

Related Topics

CSS Wiggle/Shake Effect

Using N Inside Calc

Change the Color of Mui Autocomplete Option

CSS Not Working on Django Password Form Field

Make CSS Shimmer Effect Work an Already Loaded Image

What Is Better: CSS Media Queries or Jquery Mobile

Global CSS Variables VS Local Variables in Terms of Efficiency

How to Tell Gulp to Skip or Ignore Some Files in Gulp.Src([...])

Flexbox Vertical Align Child Top, Center Another

Selecting an Element That Doesn't Have a Child with a Certain Class

User Generated Custom CSS

Sass/Scss @Extend Rule Selectors

Margin Behavior of "Overflow:Hidden" Div After Floating Div on Webkit

Custom Checkboxes Failing on Firefox

Change All Variable Value Based on Body Class

Matrix 3D Transform for Obtaining Trapezoid

CSS of Specific Table Row

CSS Selectors - Selecting a Specific Child Element


Leave a reply



Submit