ADX

by OwenMelbz

HTML

<script src="http://4coder.info/demo/jquery-smart3D/js/jquery.smart3d.js"></script>
<div id="frame"></div>
<img src="http://www2.picturepush.com/photo/a/11898290/img/11898290.png"
class="ipad" />
<img src="http://www3.picturepush.com/photo/a/11898441/img/11898441.png"
class="stats">

CSS

body {
  background-color:#D3D3D3;
}
#frame {
  width:100%;
  height:750px;
  background-image: url(http://i47.tinypic.com/wmcqx0.png);
  background-position: top center;
  position:absolute;
  top:0;
  left:0;
  z-index:9999;
}
.ipad {
  text-align:center;
  position:relative;
display:inline-block;
}
.stats {
  text-align:center;
  display:inline-block;
  position:relative;
}

JavaScript

$(document).ready(function () {

  //3d effect
  $('body').mousemove(function (event) {
    console.log(event.pageX, event.pageY);
    cx = Math.ceil($('body').width() / 2.0);
    cy = Math.ceil($('body').height() / 2.0);
    dx = event.pageX - cx;
    dy = event.pageY - cy;

    tiltx = (dy / cy);
    tilty = -(dx / cx);
    tilty = tilty;
    radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2));
    degree = (radius * 25);

    $('.ipad').css('-webkit-transform', 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');
    // $('#picture').css('-webkit-transform','rotateY(20deg)');

    // $('body').css('background-image', "-webkit-gradient(radial, " + x0 +" " + y0 +", "+ r0 +", "+ x1 +" "+ y1 +", "+ r1 +", from(#575757), to(#FFFFFF))");
    // $('h1').css('text-shadow', "#444 "+ sx +"px "+ sy + "px " + b + "px");
  });

  //scroll up
  pos = 1;
  $('body').click(function () {
    
    if(pos == 1){
      $('.ipad').animate({'top': '-736px'},function(){console.log("done"); });
      $('.stats').animate({'top': '-736px'},function(){console.log("done"); });
      pos = 2;
    }
    else{
      $('.ipad').animate({'top': '+=736px'},function(){console.log("done"); });
      $('.stats').animate({'top': '+=736px'},function(){console.log("done"); });
      pos = 1;
    }
  });

});