morpheus
Version:
A Brilliant Animator
284 lines (269 loc) • 8.31 kB
HTML
<html lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Morpheus Examples</title>
<style type="text/css" media="screen">
body {
font: 300 13px helvetica neue;
}
button {
padding: 7px;
width: 50px;
cursor: pointer;
}
h1,h2 {
font-weight: 300;
margin: 0;
padding: 0;
}
h1 {
font-size: 36px;
}
#doc {
width: 550px;
margin: 0 auto;
}
.stage {
padding: 50px;
background: #eee;
border-radius: 10px;
border: 1px solid #bbb;
margin: 15px 0;
position: relative;
overflow: hidden;
}
.box {
top: 0;
left: 0;
position: relative;
width: 20px;
height: 20px;
border-radius: 4px;
background: #f00;
margin: 5px 0;
border: 1px solid #999;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#last {
margin-bottom: 100px;
}
</style>
<script src="src/morpheus.js" type="text/javascript"></script>
<script src="src/easings.js" type="text/javascript"></script>
<script src="integration/ender.js" type="text/javascript"></script>
<script type="text/javascript">
function id(el) {
return document.getElementById(el)
}
</script>
</head>
<body>
<div id="doc">
<h1>Morpheus Examples</h1>
<div class="stage">
<h2>General</h2>
<div id="ex1" class="box"></div>
<button id="go-ex1">Go</button>
<script type="text/javascript">
id('go-ex1').onclick = function () {
id('go-ex1').disabled = true
id('ex1').style.left = 0
morpheus(id('ex1'), {
left: 400,
complete: function () {
id('go-ex1').disabled = false
}
})
}
</script>
</div>
<div class="stage">
<h2>Color</h2>
<div id="ex3" class="box"></div>
<button id="go-ex3">Go</button>
<script type="text/javascript">
id('go-ex3').onclick = function () {
id('go-ex3').disabled = true
id('ex3').style.backgroundColor = '#f00'
morpheus(id('ex3'), {
backgroundColor: '#00f',
duration: 2000,
complete: function () {
id('go-ex3').disabled = false
}
})
}
</script>
</div>
<div class="stage">
<h2>Motion + Color</h2>
<div id="ex2" class="box"></div>
<button id="go-ex2">Go</button>
<script type="text/javascript">
id('go-ex2').onclick = function () {
id('go-ex2').disabled = true
id('ex2').style.left = 0
id('ex2').style.backgroundColor = '#f00'
id('ex2').style.width = '20px'
morpheus(id('ex2'), {
left: 400,
width: '+=20',
backgroundColor: '#00f',
easing: easings.bounce,
complete: function () {
id('go-ex2').disabled = false
}
})
}
</script>
</div>
<div class="stage">
<h2>Alternative units</h2>
<div id="ex4" style="font-size: 1.2em;left: 200px;position: absolute;">hello world</div>
<button id="go-ex4">Go</button>
<script type="text/javascript">
id('go-ex4').onclick = function () {
id('go-ex4').disabled = true
id('ex4').style.fontSize = '1.2em'
morpheus(id('ex4'), {
fontSize: '+=3.1em',
easing: easings.spring,
complete: function () {
id('go-ex4').disabled = false
}
})
}
</script>
</div>
<div class="stage">
<h2>Bezier Curves</h2>
<div id="ex5" class="box"></div>
<button id="go-ex5">Go</button>
<script type="text/javascript">
id('go-ex5').onclick = function () {
id('go-ex5').disabled = true
id('ex5').style.left = 0
morpheus(id('ex5'), {
duration: 2000,
easing: easings.easeIn,
left: 400,
bezier: [[150, 300], [300, -300]],
complete: function () {
id('go-ex5').disabled = false
}
})
}
</script>
</div>
<div class="stage">
<h2>Multiple elements</h2>
<div id="ex6">
<div data-to="#0f0" class="box"></div>
<div data-to="#00c" class="box"></div>
</div>
<button id="go-ex6">Go</button>
<script type="text/javascript">
function rand(n) {
var poz = [' ', '-']
var prefix = poz[Math.floor(Math.random() * 2)]
var r = parseInt(prefix + Math.floor(Math.random() * n), 10)
return r;
}
id('go-ex6').onclick = function () {
id('go-ex6').disabled = true
$('#ex6 .box').css({
left: 1,
top: 0,
width: 20,
backgroundColor: '#f00'
})
morpheus(id('ex6').getElementsByTagName('div'), {
duration: 3000,
easing: easings.swingTo,
left: function () {
return '+=' + Math.abs(rand(400))
},
width: '+=80',
backgroundColor: function (el) {
return el.getAttribute('data-to')
},
bezier: function (el) {
return [[rand(300), rand(300)], [rand(300), rand(300)]]
},
complete: function () {
id('go-ex6').disabled = false
}
})
}
</script>
</div>
<div class="stage">
<h2>stopping animations</h2>
<div style="width:100px;height:100px;" id="ex7" class="box"></div>
<script type="text/javascript">
!function () {
var anim = {
stop: function () {}
}
id('ex7').onclick = function () {
anim.stop(true);
};
id('ex7').onmouseover = function () {
anim.stop();
anim = morpheus(id('ex7'), {
backgroundColor: '#00f',
width: 400
})
};
id('ex7').onmouseout = function () {
anim.stop();
anim = morpheus(id('ex7'), {
backgroundColor: '#f00',
width: 100
})
};
}();
</script>
</div>
<div class="stage" id="last">
<h2>Transform</h2>
<div id="ex8-scale" class="box">scale</div>
<div id="ex8-rotate" class="box">rotate</div>
<div id="ex8-skew" class="box">skew</div>
<div id="ex8-translate" class="box">translate</div>
<button id="go-ex8">Go</button>
<button id="reset-ex8">Reset</button>
<script type="text/javascript">
function reset() {
id('ex8-rotate').style[morpheus.transform] = 'rotate(0deg)'
id('ex8-scale').style[morpheus.transform] = 'scale(1)'
id('ex8-skew').style[morpheus.transform] = 'skew(0deg, 0deg)'
id('ex8-translate').style[morpheus.transform] = 'translate(0px,0px)'
}
reset()
id('reset-ex8').onclick = reset
id('go-ex8').onclick = function () {
id('go-ex8').disabled = true
morpheus(id('ex8-rotate'), {
transform: 'rotate(+=70deg)'
})
morpheus(id('ex8-scale'), {
transform: 'scale(+=1)'
})
morpheus(id('ex8-skew'), {
transform: 'skew(10deg,+=10deg)'
})
morpheus(id('ex8-translate'), {
transform: 'translate(+=50px,+=25px)',
complete: function () {
id('go-ex8').disabled = false
}
})
}
</script>
</div>
</div>
</body>
</html>