How to fade out live background images (full size)
I'm looking for a script! I want to make like the footer of this site (animation between background images where it says "Don't miss any updates"): https://getgoldee.com/
Does anyone know a similar script or can get it from this site?
Thank you for your responses!
-6
source to share
2 answers
This is how I would do it with multiple jQ lines:
var $bg = $('#bg'),
$bgDIV = $('div', $bg), // Cache your elements
n = $bgDIV.length, // count them (used to loop with % reminder)
c = 0; // counter
(function loopBG(){
$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'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
+1
source to share
If you analyze its sources, the code that handles this animation is in the file:
https://getgoldee.com/js/main.js
The code is pretty simple:
var footerBgContainer = $('.footer-bgs');
function setFooterBackground(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);
}
function footerBgRotating(interval) {
var current = 1;
setInterval(function () {
setFooterBackground((current % 3) + 1);
current++;
}, interval);
}
footerBgRotating(4000);
As you can see, it changes the CSS class with a timeout function.
Styles: (CSS animation)
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
}
0
source to share