deblan/kute.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Create timeline.html

Browse source
This commit is contained in:
thednp 2016-03-25 11:42:05 +02:00
parent 6a5b4ab616
commit a7f453557b
1 changed files with 36 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
timeline.html Normal file
View file

@ -0,0 +1,36 @@
<!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>