I successfully implemented a Crossfade effect using Jquery:
function doAnimationLoop(o, n, t, i, a) {
fadeInOut(o, n, t, i, function() {
setTimeout(function() {
doAnimationLoop(o, n, t, i, a)
}, a)
})
}
function fadeInOut(o, n, t, i, a) {
return $(o).animate({
opacity: 1
}, n).delay(t).animate({
opacity: 0
}, i, a)
}
var duration = 20,
fadeAmount = .3;
$(document).ready(function() {
var o = $("#slideshow img"),
n = o.size(),
t = 3000 * duration,
i = t / n,
a = i * fadeAmount,
e = i - i * fadeAmount * 2,
u = e * (n - 1) + a * (n - 2);
o.each(function(o, n) {
0 != o ? ($(n).css("opacity", "0"), setTimeout(function() {
doAnimationLoop(n, a, e, a, u)
}, e * o + a * (o - 1))) : setTimeout(function() {
$(n).animate({
opacity: 0
}, a, function() {
setTimeout(function() {
doAnimationLoop(n, a, e, a, u)
}, u)
})
}, e)
})
});.home h1 {
font-family: 'Open Sans';
font-size: 5em;
}
.main {
text-shadow: 0px 0px 10px #696969;
position: absolute;
top: 2em;
color: #f6f6f6;
font-weight: 900;
z-index: 999;
}
.sub-main {
font-weight: 100;
position: absolute;
top: 3em;
color: white;
text-shadow: 0px 0px 50px #696969 !important;
z-index: 999;
}
#slideshow img {
position: absolute;
left: 0;
top: 0;
width: 100%;
}<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--- Home --->
<div class="container-fluid home" id="home">
<div id="slideshow">
<img src="http://assets1.ignimgs.com/2017/01/25/kingdomhearts28-1280-1485381321286_1280w.jpg" />
<img src="http://s2.glbimg.com/C4MoBvLkWM9NFo8gtXNd9-mP-I8=/850x446/s.glbimg.com/po/tt2/f/original/2016/02/04/kingdom-hearts-4.jpg" />
<img src="http://static.zerochan.net/Kingdom.Hearts.II.full.873765.jpg" />
<img src="http://www.geekgirlauthority.com/wp-content/uploads/2016/10/Kingdom-Hearts.jpg" />
<img src="http://2.bp.blogspot.com/-HS5t27V1LYw/UBGLg9eBDII/AAAAAAAABmY/A0U6fCuyDFc/s1600/Kingdom_Hearts_Wallpaper_by_Wightwizard8.jpg" />
<img src="http://www.hardcoregamer.com/wp-content/uploads/2017/01/Kingdom-Hearts-Saga-747x309.jpg" />
</div>
<section class="row">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
<h1 class="main" style="z-index: 100;">Title</h1>
<h1 class="sub-main" style="z-index: 100;">Tagline</h1>
</div>
</section>
</div>I have encountered an issue I haven't faced before...
I now aim to include text on top of these images, each with their respective title/tagline that fades along with the image!
How can I achieve fading text along with the fading images?
Thank you!