morpheus
Version:
A Brilliant Animator
146 lines (140 loc) • 3.66 kB
HTML
<html lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>ender integration</title>
<style type="text/css" media="screen">
body {
height: 100%;
overflow: hidden;
font-size: 12px;
}
.wha {
z-index: 1;
left: 0;
top: 0;
position: absolute;
width: 30px;
height: 30px;
background-color: bastard-child;
filter: alpha(opacity=20);
opacity: .2;
zoom: 1;
}
.wha-2 {
background-color: #444999;
opacity: 0;
}
.wha-3 {
left: 100px;
opacity: 0.5;
background: #44792c;
}
.wha-4 {
top: 300px;
background-color: #11eecc;
}
#right .wha {
left: auto ;
right: 0;
}
#op {
color: #fff;
width: 150px;
height: 150px;
padding: 20px;
background: blue;
opacity: 0;
filter: alpha(opacity=0);
margin: 0 auto;
font-family: helvetica neue, helvetica, arial;
font-weight: 100;
text-align: center;
}
#bez {
position: absolute;
left: 200px;
top: 200px;
width: 20px;
height: 20px;
background: purple;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
<script src="ender.js"></script>
<script src="../src/morpheus.js"></script>
<script src="../src/ender.js"></script>
<script src="../src/easings.js"></script>
<script type="text/javascript">
$.domReady(function () {
$('#left .wha').animate({
duration: 1000,
opacity: 1,
'background-color': '#88ff99',
height: '+=20',
width: '-=20',
top: 100,
left: '400px',
easing: easings.bouncePast,
complete: function () {
morpheus(document.getElementById('op'), {
opacity: 1,
fontSize: '+=1.8em',
easing: easings.spring
})
}
})
$('#right .wha').animate({
duration: 1000,
opacity: 1,
'background-color': '#109',
height: '+=20',
width: '-=20',
top: 100,
right: '400px',
easing: easings.bouncePast
})
!function () {
if ($.browser.ie && $.browser.version < 9) return
function loop() {
$('#bez').css({
backgroundColor: '#f0f'
})[0].style[require('morpheus').transform] = 'scale(1)'
$('#bez').animate({
duration: 3000,
left: 200,
top: 200,
backgroundColor: '#00f',
transform: 'scale(5)',
bezier: [[300, 100], [400, 200], [300, 300]],
complete: loop,
easing: function (t) {
return t
}
})
}
loop()
}()
})
</script>
</head>
<body>
<div id="bez"></div>
<div id="left">
<div class="wha wha-1"></div>
<div class="wha wha-1"></div>
<div class="wha wha-2"></div>
<div class="wha wha-3"></div>
<div class="wha wha-4"></div>
</div>
<div id="right">
<div class="wha wha-1"></div>
<div class="wha wha-2"></div>
<div class="wha wha-3"></div>
<div class="wha wha-4"></div>
</div>
<div id="op" style="font-size: 0.5em">mø®phéüs</div>
</body>
</html>