JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://benpickles.github.io/onScreen/jquery.onscreen.min.js"></script>
<div class="faded">Div 1</div>
<div class="faded">Div 2</div>
<div class="faded">Div 3</div>
<div class="faded">Div 4</div>
<div class="faded">Div 5</div>
<div class="faded">Div 6</div>
<div class="faded">Div 7</div>
<div class="faded">Div 1</div>
<div class="faded">Div 2</div>
<div class="faded">Div 3</div>
<div class="faded">Div 4</div>
<div class="faded">Div 5</div>
<div class="faded">Div 6</div>
<div class="faded">Div 7</div>
<div class="faded">Div 1</div>
<div class="faded">Div 2</div>
<div class="faded">Div 3</div>
<div class="faded">Div 4</div>
<div class="faded">Div 5</div>
<div class="faded">Div 6</div>
<div class="faded">Div 7</div>
<div class="faded">Div 1</div>
<div class="faded">Div 2</div>
<div class="faded">Div 3</div>
<div class="faded">Div 4</div>
<div class="faded">Div 5</div>
<div class="faded">Div 6</div>
<div class="faded">Div 7</div>
<div class="faded">Div 1</div>
<div class="faded">Div 2</div>
<div class="faded">Div 3</div>
<div class="faded">Div 4</div>
<div class="faded">Div 5</div>
<div class="faded">Div 6</div>
<div class="faded">Div 7</div>
<div class="faded">Div 1</div>
<div class="faded">Div 2</div>
<div class="faded">Div 3</div>
<div class="faded">Div 4</div>
<div class="faded">Div 5</div>
<div class="faded">Div 6</div>
<div class="faded">Div 7</div>
<div class="faded">Div 1</div>
<div class="faded">Div 2</div>
<div class="faded">Div 3</div>
<div class="faded">Div 4</div>
<div class="faded">Div 5</div>
<div class="faded">Div 6</div>
<div class="faded">Div 7</div>
<div class="faded">Div 1</div>
<div class="faded">Div 2</div>
<div class="faded">Div 3</div>
<div class="faded">Div 4</div>
<div class="faded">Div 5</div>
<div class="faded">Div...

CSS

/*transitions added by css*/
 {
  -webkit-transition: all 0.5s ease;
  -moz-transition:    all 0.5s ease;
  -ms-transition:     all 0.5s ease;
  -o-transition:      all 0.5s ease;
}

 .faded { border: solid 1px #ddd; background: #eee; position:relative; left:-50px; width:100px; height:100px;float:left; }

JavaScript

//Only do this if in viewport - fade in sequentially & animate, slide right during fade, set width, float left
$("div").each(function(delay) {
    $(this).css('display', 'block').animate({ opacity: 0 }, 0).delay(delay * 100).animate({ opacity: 1, "left": "+=50px" }, 400, "easeOutExpo" );
});
//add diff easing properties to make it more swift

//for clear use of easing/instructs - http://easings.net/
//for easing cdn - http://cdnjs.com/

$(function() {
  setInterval(function() {
    $("div")                             // get all <h2>s
      .css("background-color", "")      // reset their background colours
      .filter(":onScreen")              // get only <h2>s on screen
        .css("background-color", "red") // give them a red background
  }, 1000)                              // repeat every second
})