How To Fade Animate Background Images (full Size)

I'm looking for a script ! I want to do like the footer of this website ( animation between the background images where it's written '' Don't miss any update '') : https://getgold

Solution 1:

This is how I would do it with a couple of jQ lines:

var $bg = $('#bg'),
    $bgDIV = $('div', $bg), // Cache  your elements
    n = $bgDIV.length,      // count them (used to loop with % reminder)
    c = 0;                  //  counter

(functionloopBG(){ 
  $bgDIV.eq(++c%n).hide().appendTo($bg).fadeTo(3000,1, loopBG);
}());   // start fade animation

*{margin:0; padding:0;}

body{
  width:100%;
  height:100%;
}

#bg{
  position:absolute;
  top:0;
  width:100%;
  height:100%;
}
#bg:after{
  content:"";
  position:absolute;
  top:0; left:0;
  z-index:1;
  width:100%;
  height:100%;
  background:url(//i.stack.imgur.com/D0AZ1.png);
}
#bg > div{
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  background: none 50%;
  background-size: cover;
}
#bg > #one{   background-image: url('//i.stack.imgur.com/T3U9b.png'); }
#bg > #two{   background-image: url('//i.stack.imgur.com/UKeA2.png'); }
#bg > #three{ background-image: url('//i.stack.imgur.com/hrArW.png'); }

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="bg"><divid="one"></div><divid="two"></div><divid="three"></div></div>

Solution 2:

If you analize its sources, the code handling this animation is in the file:

https://getgoldee.com/js/main.js

The code is quite simple:

var footerBgContainer = $('.footer-bgs');

functionsetFooterBackground(bgNumber) {
    var prev = footerBgContainer.find('.bg');

    setTimeout(function () {
        prev.remove();
    }, 4100);

    var el = document.createElement('div');
    el.className += 'bg bg' + bgNumber;

    footerBgContainer.append(el);

    setTimeout(function () {
        el.className += ' show';
    }, 20);
}

functionfooterBgRotating(interval) {
    var current = 1;

    setInterval(function () {
        setFooterBackground((current % 3) + 1);
        current++;
    }, interval);
}

footerBgRotating(4000);

As you can see, it changes CSS class with a timeout function.

Styles are: (animation is in CSS)

footer.bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    -webkit-transition: opacity 4s linear;
    -moz-transition: opacity 4s linear;
    -o-transition: opacity 4s linear;
    transition: opacity 4s linear
}

footer.bg.show {
    opacity: 1;
    -webkit-transition: opacity 4s linear;
    -moz-transition: opacity 4s linear;
    -o-transition: opacity 4s linear;
    transition: opacity 4s linear
}

footer.bg.bg1 {
    background: url("../img/footer-bg1.png") no-repeat;
    background-size: cover
}

footer.bg.bg2 {
    background: url("../img/footer-bg2.png") no-repeat;
    background-size: cover
}

footer.bg.bg3 {
    background: url("../img/footer-bg3.png") no-repeat;
    background-size: cover
}