37 lines
1.1 KiB
HTML
37 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>KUTE.js Timeline</title>
|
|
<style>
|
|
.dv {
|
|
width: 100px; height: 100px; float: left;
|
|
text-align: center; line-height: 100px;
|
|
margin: 20px 20px 20px 0;
|
|
background: #0cf;
|
|
position: relative;
|
|
}
|
|
</style>
|
|
</head><body>
|
|
|
|
<div class="dv"></div>
|
|
<div class="dv"></div>
|
|
<div class="dv"></div>
|
|
<div class="dv"></div>
|
|
<div class="dv"></div>
|
|
|
|
|
|
<script src='kute.js'></script>
|
|
<script src='kute-timeline.js'></script>
|
|
<script>
|
|
|
|
var tl = new KUTE.Timeline();
|
|
tl.fromTo('.dv', { rotate : 0 }, { rotate : 45 }, { easing : { rotate : 'easingBounceInOut' }, offset : { rotate : 200 } })
|
|
tl.to('.dv', { left : 200 }, { easing : { left : 'easingElasticInOut'}, offset: 300 });
|
|
tl.to('.dv', { top : 200 }, { easing : { top : 'easingElasticInOut' }, offset: 300, duration : 1000 });
|
|
tl.to('.dv', { width : 45 }, { easing : { width : 'easingElasticInOut' }, offset: 200, duration : 1000 });
|
|
tl.to('.dv', { height : 45 }, { easing : { height : 'easingElasticInOut' }, offset: 200, duration : 1000 });
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|