使用褪色图像添加褪色文本=> JQuery

Question

I created this Crossfade effect on 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 = 3e3 * 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 am facing a problem I never have faced before which is...

I want to add Text on the top of these images, each image has it's title/tagline. I want the text to fade with the image though!!

How do I make a fading text with the fading images?

Thank you!

Answer 1

add this to your css:

.anim{
    animation: opac 2s infinite;
}
@keyframes opac{
    from {opacity:0} 
    to {opacity:1}
}

then add the class anim to your title, tagline and tell if this is what you want or not?