OverScroll Demo

http://lenticular.attasi.com/

by Ilya Karpuk

HTML

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://lenticular.attasi.com/js/lenticular.min.js"></script>
<script src="http://dev.ljd.dk/tmp/lenticular/jquery.overscroll.js"></script>
<div class="ipad">
    <div class="ipad-camera"></div>
    <div class="ipad-content">
        <div class="ipad-contentscroll">
            <img src="http://dev.ljd.dk/tmp/lenticular/wr-ipad-full.jpg" width="384" height="3479" alt="Work Reimagined" class="wr-site" />
            <img src="http://dev.ljd.dk/tmp/lenticular/wr-ipad-menu.png" width="384" height="58" alt="Work Reimagined Menu" class="wr-menu" />
        </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;
    overflow:hidden;
    
    position:relative;
    
    background:#262631;
}
.ipad-contentscroll {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}
}
.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;
    
    -webkit-mask: url(http://dev.ljd.dk/tmp/lenticular/ipad-mask.png);
    -moz-mask: url(http://dev.ljd.dk/tmp/lenticular/ipad-mask.png);
    -ms-mask: url(http://dev.ljd.dk/tmp/lenticular/ipad-mask.png);
    -o-mask: url(http://dev.ljd.dk/tmp/lenticular/ipad-mask.png);
   ...

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();
    
    // Overscroll
    //$('.ipad-contentscroll').overscroll();
    
    // 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': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    };
    transitionProperty = Modernizr.prefixed('transition');
    transitionEndProperty = transitionEndEvents[transitionProperty];
 ...