JavaScript Fx.TransMorph für MooTools
Fx.TransMorph für MooTools
ist ähnlich Fx.Morph aber erlaubt per-property transitions.
Autor:Lim Chee Aun
JavaScript - Fx.TransMorph für MooTools
in <head>
<style>
.demo{
position: relative;
}
.ball{
color: #fff;
background-color: red;
width: 50px;
height: 50px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
#demo1{
width: 600px;
height: 350px;
border-bottom: 5px solid #000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<script src="http://github.com/cheeaun/Fx.TransMorph/raw/master/Source/Fx.TransMorph.js"></script>
<script>
window.addEvent('domready', function(){
var ball1 = $('ball1').set('transmorph', {
duration: 2000
});
var topTrans = 'bounce:out', leftTrans = 'cubic:out';
var fxTransitionV = $('fxTransitionV'), fxTransitionH = $('fxTransitionH'),
fxEaseV = $('fxEaseV'), fxEaseH = $('fxEaseH');
$$('#fxTransitionV, #fxTransitionH, #fxEaseV, #fxEaseH').addEvent('change', function(){
topTrans = fxTransitionV.get('value') + ':' + fxEaseV.get('value');
leftTrans = fxTransitionH.get('value') + ':' + fxEaseH.get('value');
});
$('run1').addEvent('click', function(){
ball1.transmorph({
top: [0, 300],
left: [0, 550]
}, {
top: topTrans,
left: leftTrans
});
});
});
</script>
in <body>
<div>
<label for="fxTransitionH">Horizontal Transition</label>:
<select id="fxTransitionH">
<option value="linear">Linear</option>
<option value="quad">Quadratic</option>
<option value="cubic" selected>Cubic</option>
<option value="quart">Quartic</option>
<option value="quint">Quintic</option>
<option value="sine">Sinusoidal</option>
<option value="expo">Exponential</option>
<option value="circ">Circular</option>
<option value="bounce">Bounce</option>
<option value="back">Back</option>
<option value="elastic">Elastic</option>
</select>
<select id="fxEaseH">
<option value="in">easeIn</option>
<option value="out" selected>easeOut</option>
<option value="in:out">easeInOut</option>
</select>
<label for="fxTransitionV">Vertical Transition</label>:
<select id="fxTransitionV">
<option value="linear">Linear</option>
<option value="quad">Quadratic</option>
<option value="cubic">Cubic</option>
<option value="quart">Quartic</option>
<option value="quint">Quintic</option>
<option value="sine">Sinusoidal</option>
<option value="expo">Exponential</option>
<option value="circ">Circular</option>
<option value="bounce" selected>Bounce</option>
<option value="back">Back</option>
<option value="elastic">Elastic</option>
</select>
<select id="fxEaseV">
<option value="in">easeIn</option>
<option value="out" selected>easeOut</option>
<option value="in:out">easeInOut</option>
</select>
<button id="run1">Run</button>
</div>
</fieldset>
<div id="demo1" class="demo">
<div id="ball1" class="ball"></div>
</div>
