lenticular.js Demo

http://lenticular.attasi.com/

HTML

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://lenticular.attasi.com/js/lenticular.min.js"></script>
<div class="ipad">
    <div class="ipad-camera"></div>
    <div class="ipad-content">
        <div class="lenticular workreimagined"></div>
    </div>
    <div class="ipad-button"></div>
    <div class="ipad-specularmask"><div class="ipad-specularlight"></div></div>
    <div class="ipad-shadow"></div>
</div>

CSS

/* House cleaning */
html, body {
    height:100%;
    min-height:100%;
}
body {
    padding:50px;
    
    background:cadetblue center center no-repeat;
    background-image: -ms-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    background-image: -moz-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    background-size: cover;
    
    -webkit-perspective: 600;
    -moz-perspective: 600;
    -ms-perspective: 600;
    -o-perspective: 600;
    perspective: 600;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
/* iPad */
.ipad {
    width:384px;
    height:512px;
    border:2px solid #a5a7a9;
    padding:50px;
    margin-left:-242px;
    
    position:absolute;
    left:50%;
    
    background:#090909;
    
    border-radius:25px;
}
.ipad-content {
    width:384px;
    height:512px;
    
    position:relative;
    
    background:#262631;
}
.ipad-camera {   
    width: 7px;
    height: 7px;
    margin-left: -4px;
    border-radius: 6px;
    
    position: absolute;
    top: 22px;
    left: 50%;
    z-index: 2;
    
    background: rgba(0, 0, 0, .3);
    
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .3);
}
.ipad-specularmask {
    width:484px;
    height:612px;
    overflow: hidden;
    
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 1;
    
  
}
.ipad-specularlight {
    margin-left: -1200px;
    margin-top: -600px;
    width: 1200px;
    height: 1200px;
    
    position: absolute;
    top: 50%;
    left: 50%;
    
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)) no-repeat;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)) no-repeat;
   ...

JavaScript

/*** 
* Debounced event listener - http://jsfiddle.net/tD6FM/
***/
(function($,smartbind){
  var debounce = function (func, threshold, execAsap) {
    var timeout;

    return function debounced () {
      var obj = this, args = arguments;
      function delayed () {
        func.apply(obj, args);
      };

      if (timeout) {
        clearTimeout(timeout);
      } else if (execAsap) {
        func.apply(obj, args);
        return;
      }
      timeout = setTimeout(delayed, threshold || 200);
    };
  }
  // Smartbind
  jQuery.fn[smartbind] = function(event,func,threshold,execAsap){ return func ? this.bind(event, debounce(func,threshold,execAsap)) : this.trigger(event); };

})(jQuery,'smartbind');

/**
* Fiddle specific code
**/
$(document).ready(function() {
    var $doc, $win;
    $doc = $(document.documentElement);  
    $win = $(window);
    
    // Resize
    var getWinWidth, winWidth, winHeight;  
    getWinDimensions = function () {
        winWidth = $win.width();
        winHeight = $win.height();
        return {width: winWidth, height: winHeight };
    };
    $win.smartbind('resize', getWinDimensions);
    getWinDimensions();
    
    // Lenticular
    var currentLenticular, workreimagined, transformProperty, zPosition, xPosition, zRotation, marginLeft, marginTop;
    workreimagined = new Lenticular.Image(
        $('.workreimagined')[0],
        {
            images: 'http://dev.ljd.dk/tmp/lenticular/wr-ipad-##.jpg',
            frames: 12,
			useTilt: false
        }
    );
	workreimagined.showFrame(0);
    
    // Get transform and transition property and convert to CSS
    var transitionEndEvents, transformProperty, transitionProperty, transitionEndProperty, domToCss;
    domToCss = function domToCss(property) {
        var css = property.replace(/([A-Z])/g, function(str, m1) {
            return '-' + m1.toLowerCase();
        }).replace(/^ms-/, '-ms-');
    
        return css;
    };
    transitionEndEvents = {
        'WebkitTransition':...