JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div class="bg">
<img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg">
<img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg">
<img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg">
<img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg">
<img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg">
</div>

<article>

<p>Automatically changes the background image every few seconds, using <a href="http://www.w3.org/TR/css3-animations/">CSS3 animations</a>. This version changes the opacity of <code>img</code> elements, and thus should work on any browser that supports CSS3 animations. Instead of <code>img</code> elements, they could be any other kind of element with <code>background-image</code> set (which would scale the images while preserving the aspect ratio).</p>

<p>The timing is tricky in this version, and the last image always shows up a bit longer then the first (because it will show on top of the first image during the transition).</p>

<p>Inspired by <a href="http://www.reddit.com/r/css/comments/275rdk/trying_to_create_a_background_slideshow_for_my/">this reddit question</a>, based on <a href="http://jsfiddle.net/htmled/2kkHH/">this fiddle</a>. See also this <a href="http://codepen.io/denilsonsa/pen/mwveL">alternate implementation</a>.</p>

<hr>

<p>Lorem ipsum dolor sit amet, laoreet fastidii quo ad, cibo novum expetenda mei cu. An delicata suavitate aliquando mei, posse fabellas mediocritatem ea nec. Autem recteque at ius, ne sed omnesque insolens. Facer apeirian vim id, no ius tritani debitis. Vel ne dicant abhorreant mnesarchum. No affert discere cum, iudicabit explicari sit no.</p>

<p>His ut solum conceptam, sea populo offendit no, te pro audire consulatu. Nec nisl erroribus percipitur ea, id sit vidisse expetenda moderatius. Duo aliquid prodesset constituto cu, causae saperet concludaturque ne mel, sit meis debitis ei. Mel omnium percipitur theophrastus et,...

CSS

.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -999;
}
.bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 70%;
  height: auto;
  
  animation-name: show-for-a-while;
  animation-duration: 25s; /*50s;*/
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.bg img:nth-child(1) { animation-delay: -25s; }
.bg img:nth-child(2) { animation-delay: -20s; }
.bg img:nth-child(3) { animation-delay: -15s; }
.bg img:nth-child(4) { animation-delay: -10s; }
.bg img:nth-child(5) { animation-delay: -5s; }

/* Add .debug class to see the images. */
.bg.debug img:nth-child(1) { margin-top: 1em; }
.bg.debug img:nth-child(2) { margin-top: 2em; }
.bg.debug img:nth-child(3) { margin-top: 3em; }
.bg.debug img:nth-child(4) { margin-top: 4em; }
.bg.debug img:nth-child(5) { margin-top: 5em; }

@keyframes show-for-a-while {
  0%,20% { opacity: 1; }
  25%,95% { opacity: 0; }
}

/* Misc. styling below */

html, body {
  margin: 0;
  padding: 0;
}

article {
  max-width: 30%;
  text-align: justify;
  text-indent: 2em;
  margin: 0;
  position:absolute;
  right:0;
  background: rgba(255, 255, 255, 0.875);
  padding: 0em;
  border-radius: 0em;
  border: 1px solid rgba(0, 0, 0, 0.875);
  font-family: sans-serif;
  line-height: 1.5;
}

article :first-child {  margin-top: 0;   }
article :last-child  { margin-bottom: 0; }

JavaScript

$('.fadein img:gt(0)').hide();

setInterval(function () {
    $('.fadein :first-child').fadeOut()
                             .next('img')
                             .fadeIn()
                             .end()
                             .appendTo('.fadein');
}, 4000); // 4 seconds