jquery.pep.js
Version:
Kinetic drag for mobile & desktop
66 lines (48 loc) • 2.04 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>jquery.pep demo - slider</title>
<!-- Load local jQuery. -->
<script src="../libs/jquery/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<!-- Load local lib and tests. -->
<script src="../src/jquery.pep.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $obj = $("#object");
var $parent = $("#parent");
var height = $parent.height();
var $pep = $(".pep");
var objHeight = $pep.height();
$('.peppable').pep({
constrainTo: 'parent',
shouldEase: false,
drag: function(ev, obj){
var vals = obj.getMovementValues();
var percent = vals.pos.y / (height-objHeight);
$obj.css({
"-webkit-transform": "scale("+ (1 - percent) +") rotate("+ 100*percent +"deg)",
"-moz-transform": "scale("+ (1 - percent) +") rotate("+ 100*percent +"deg)",
"-ms-transform": "scale("+ (1 - percent) +") rotate("+ 100*percent +"deg)",
"-o-transform": "scale("+ (1 - percent) +") rotate("+ 100*percent +"deg)",
"transform": "scale("+ (1 - percent) +") rotate("+ 100*percent +"deg)"
})
}
});
});
</script>
<style type="text/css">
body{ padding: 0; margin: 0; }
#parent { border: 1px solid #666; width: 100px; height: 300px; margin: 30px; }
.pep { width: 100%; height: 60px; background: rgb(243, 200, 200); color: white; }
#object { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin-left: -150px; margin-top: -150px; background: rgb(120, 200, 200); }
</style>
</head>
<body>
<div id="parent">
<div class="pep peppable"></div>
</div>
<div id="object"></div>
</body>
</html>