emile
Version:
no-thrills stand-alone CSS animation JavaScript framework
125 lines (123 loc) • 2.87 kB
HTML
<html>
<head>
<title>Slide Example</title>
<meta name="viewport" content="width=320, user-scalable=no">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
html,body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
p {
margin: 0;
font: 100 50px 'helvetica neue', helvetica, arial;
opacity: 0;
color: #333;
filter: alpha(opacity=0);
position: relative;
top: 10px;
}
#anim {
text-align: center;
position: relative;
width: 750px;
margin: 0 auto;
top: 100px;
height: 100px;
}
#anim div {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
}
#nw {
left: 0;
top: 0;
background-color: green;
}
#ne {
top: 0;
right: 0;
background-color: blue;
}
#sw {
bottom: 0;
left: 0;
background-color: orange;
}
#se {
bottom: 0;
right: 0;
background-color: red;
}
</style>
</head>
<body>
<div id="anim">
<p id="emile">Émile</p>
<div id="nw"></div>
<div id="ne"></div>
<div id="sw"></div>
<div id="se"></div>
</div>
<script src="../src/emile.js" type="text/javascript"></script>
<script src="../src/easings.js" type="text/javascript"></script>
<script type="text/javascript">
emile('nw', {
"background-color": '#ff00ff',
left: 500,
top: 100,
easing: easings.bounce,
duration: 1000
});
emile('ne', {
"background-color": '#0000ff',
right: 500,
top: 100,
easing: easings.bounce,
duration: 1000
});
emile('sw', {
"background-color": '#00ff00',
left: 500,
bottom: 100,
easing: easings.bounce,
duration: 1000
});
emile('se', {
'background-color': '#00ccff',
right: 500,
bottom: 100,
easing: easings.bounce,
duration: 1000,
after: function () {
emile('emile', {
opacity: 1,
duration: 1000,
after: function () {
function f1() {
emile('emile', {
duration: 1000,
color: '#ff0000',
after: f2
});
}
function f2() {
emile('emile', {
duration: 1000,
color: '#00ff00',
after: f1
});
}
f1();
}
});
}
});
</script>
</body>
</html>