JSFiddle - React, Tailwind, and code Playground

by jeffsturgis

HTML

<div id="kenburns" class="slideshow"></div>

CSS

html { background: #000; }
.slideshow {position: relative; overflow: hidden; height: 100%; width: 100%;}

JavaScript

// Create a new YUI instance and populate it with the required modules.
YUI().use('node', function (Y) {

var images = [
    'http://farm9.staticflickr.com/8402/8694723513_707c1696e7_z.jpg',
    'http://farm9.staticflickr.com/8124/8694496417_6df9929701_z.jpg',
    'http://farm9.staticflickr.com/8540/8695962944_e78a232fdd_z.jpg'],
    cached = false,
    cachTimer = 0,
    scaleVal = 1,
    animId,
    i = 0,
    CacheModel = function(src){
        var img = document.createElement( 'img' ),
            that = this;
        
        img.onload = function(){        
            that.height = img.naturalHeight;
            that.width = img.naturalWidth;
            that.src = src;
            that.elem = img;
        };
        
        img.src = src;
    },
    cache = [],
    context,
    toggle;

// requestAnim shim layer by Paul Irish
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
    
 if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };    
  

// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

init();

function init() {
    
    images.forEach(function(src){
        cache.push(new CacheModel(src));
        
        if(cache.length === images.length){
            cached = true;
        }
    });
    
   cachTimer = setInterval(function(){
        if(!cached){
            console.log('still caching');
            return;
        }else{
            console.log('cached');
            clearInterval(cachTimer);
           ...