jquery-flapper
Version:
A split-flap (Solari) display for numbers and words using jQuery
399 lines (379 loc) • 10.7 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<!-- http://www.phpied.com/conditional-comments-block-downloads/ -->
<!--[if IE]><![endif]-->
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"><![endif]-->
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Viewport Fix
@link http://j.mp/mobileviewport & http://davidbcalhoun.com/2010/viewport-metatag
device-width : Occupy full width of the screen in its current orientation
initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
-->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- CSS : implied media="all"-->
<link rel="stylesheet" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css" />
<link rel="stylesheet" href="css/style.css?v=0.1">
<!-- All JavaScript at the bottom, except for Modernizr. -->
<script src="js/modernizr-1.5.min.js"></script>
</head>
<!-- http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <body class="ie ie6 lt-ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 7 ]> <body class="ie ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 8 ]> <body class="ie ie8 lt-ie9"> <![endif]-->
<!--[if IE 9 ]> <body class="ie ie9"> <![endif]-->
<!--[if gt IE 9]> <body> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
<div id="container">
<div id="header">
<button id="all">Run All</button>
<button id="prev">Prev</button>
<button id="next">Next</button>
<h2>Test <span id="step"></span><span id="func"></span><span id="data"></span></h2>
</div>
<div id="body">
<div class="clearfix">
<div class="box">
<div class="outer">
<div class="transform">
<img src="i/elephant.png" height="150" width="150" />
</div>
</div>
</div>
<div class="box">
<div class="outer">
<div class="transform">
<img src="i/arrow-up.png" height="150" width="150" />
</div>
</div>
</div>
<div class="box plain">
<div class="outer">
<div class="transform">
<p>Some Text</p>
</div>
</div>
</div>
</div>
<div class="clearfix">
<div class="box">
<div class="outer">
<div class="animate">
<img src="i/elephant.png" height="150" width="150" />
</div>
</div>
</div>
<div class="box">
<div class="outer">
<div class="animate">
<img src="i/arrow-up.png" height="150" width="150" />
</div>
</div>
</div>
<div class="box plain">
<div class="outer">
<div class="animate">
<p>Some Text</p>
</div>
</div>
</div>
</div>
<div class="clearfix">
<div class="box">
<div class="outer">
<div class="transition">
<img src="i/elephant.png" height="150" width="150" />
</div>
</div>
</div>
<div class="box">
<div class="outer">
<div class="transition">
<img src="i/arrow-up.png" height="150" width="150" />
</div>
</div>
</div>
<div class="box plain">
<div class="outer">
<div class="transition">
<p>Some Text</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScrpt -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script src="../dist/jquery.transform.js"></script>
<!-- <script src="../src/jquery.transform.js"></script>
<script src="../src/jquery.transform.attributes.js"></script>
<script src="../src/jquery.transform.animate.js"></script>
<script src="../src/jquery.angle.js"></script>
<script src="../src/jquery.matrix.js"></script>
<script src="../src/jquery.matrix.calculations.js"></script>
<script src="../src/jquery.matrix.functions.js"></script> -->
<script type="text/javascript">
var log = 0;
if ($.transform.prototype.exec) {
var _exec = $.transform.prototype.exec;
$.transform.prototype.exec = function(){
log++;
return _exec.apply(this, arguments);
};
} else if ($.transform.prototype.transform) {
var _transform = $.transform.prototype.transform;
$.transform.prototype.transform = function(){
log++;
return _transform.apply(this, arguments);
};
}
var $elem = $('.transform, .transition'),
$anim = $('.animate'),
$text = $('#func'),
$step = $('#step'),
$data = $('#data'),
current = -1;
$('#all').click(all);
$('#prev').click(prev);
$('#next').click(next);
function all() {
next(current);
}
function prev() {
current--;
$step.text(current + ': ');
go();
}
function next(all) {
if (all === current || typeof all === 'object') {
current++;
$step.text(current + ': ');
go(typeof all !== 'object');
}
}
function go(all) {
var now = current;
var tests = [
function() {
$elem.transform({"reflect": true});
$anim.animate({"reflect": true}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('reflect');
},
function() {
$elem.transform({"reflectX": true});
$anim.animate({"reflectX": true}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('reflectX');
},
function() {
$elem.transform({"reflectXY": true});
$anim.animate({"reflectXY": true}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('reflectXY');
},
function() {
$elem.transform({"reflectY": true});
$anim.animate({"reflectY": true}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('reflectY');
},
function() {
$elem.transform({"reflectXY": true});
$anim.animate({"reflectXY": true}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('reflectXY');
},
function() {
$elem.transform({"rotate": '13deg'});
$anim.animate({"rotate": '13deg', "matrix": [1, 0, 0, 1]}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('rotate: 13deg');
},
function() {
$elem.transform({"rotate": '-13deg'});
$anim.animate({"rotate": '-13deg'}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('rotate: -13deg');
},
function() {
$elem.transform({"rotate": '195deg'});
$anim.animate({"rotate": '195deg'}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('rotate: 195deg');
},
function() {
$elem.transform({"rotate": '-195deg'});
$anim.animate({"rotate": '-195deg'}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('rotate : -195deg');
},
function() {
$elem.transform({"scale": .75});
$anim.animate({"scale": .75, "rotate": 0}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('scale : .75');
},
function() {
$elem.transform({"scale": [.75, .75]});
$anim.animate({"scale": [.75, .75]}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('scale : [.75, .75]');
},
function() {
$elem.transform({"scaleX": .75});
$anim.animate({"scaleX": .75, "scale": [1, 1]}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('scaleX : .75');
},
function() {
$elem.transform({"scaleY": .75});
$anim.animate({"scaleY": .75, "scaleX": 1}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('scaleY : .75');
},
function() {
$elem.transform({"skew": '13deg'});
$anim.animate({"skew": '13deg', "scaleY": 1}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('skew : 13');
},
function() {
$elem.transform({"skew": ['13deg', '13deg']});
$anim.animate({"skew": ['13deg', '13deg']}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('skew : [13deg, 13deg]');
},
function() {
$elem.transform({"skewX": '13deg'});
$anim.animate({"skewX": '13deg', "skew": 0}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('skewX : 13deg');
},
function() {
$elem.transform({"skewY": '13deg'});
$anim.animate({"skewY": '13deg', "skewX": 0}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('skewY : 13deg');
},
function() {
$elem.transform({"translate": '13px'});
$anim.animate({"translate": '13px', "skewY": 0}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('translate : 13px');
},
function() {
$elem.transform({"translate": ['13px', '13px']});
$anim.animate({"translate": ['13px', '13px']}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('translate : [13px, 13px]');
},
function() {
$elem.transform({"translateX": '13px'});
$anim.animate({"translateX": '13px', "translate": [0, 0]}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('translateX : 13px');
},
function () {
$elem.transform({"translateY": '13px'});
$anim.animate({"translateY": '13px', "translateX": 0}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('translateY : 13px');
},
function () {
$elem.transform({});
$anim.animate({"translateY": 0}, {
'complete': function(){
if (all) next(now);
}
});
$text.text('Test');
}
];
if (tests[current]) {
tests[current]();
$data.text(' | ' + $elem.first().attr('data-transform'));
} else {
$text.text('Done! Ran ' + log + ' times.');
$data.text('');
current = -1;
log = 0;
return false;
}
return true;
}
</script>
</body>
</html>