archive-gh-me/tween.js
1
0
Fork 0
mirror of https://github.com/tweenjs/tween.js.git synced 2025-12-08 20:16:12 +00:00
Code Issues Projects Releases Wiki Activity

Make example 9 more JSHint-friendly O:-), also fix title to be 'relative destination', and use minified tween version

Browse Source
This commit is contained in:
sole 2013-02-28 21:37:52 +00:00
parent 1bc309b273
commit be0535b46d
1 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
examples/09_relative_destination.html
View File

@ -1,40 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tween.js / repeat</title>
<title>Tween.js / relative destination</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="info">
<h1><a href="http://github.com/sole/tween.js">tween.js</a></h1>
<h2>09 _ relative destination</h2>
<p>Demonstrating the relative feature, with repeat.</p>
</div>
<div style="position: absolute; left: 400px; ">
<div id="target1" style="position: absolute;" data-top="200" class="box">
</div>
</div>
<!--<script src="../build/tween.min.js"></script>-->
<script src="../src/Tween.js"></script>
<style type="text/css">
.box {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
display: inline-block;
float: left;
}
#target1 {
background: #fcc;
}
</style>
<script src="../build/tween.min.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<script>
init();
animate();
window.onload = function() {
init();
animate();
}
function init() {
var target1 = document.getElementById( 'target1' ),
tween1 = new TWEEN.Tween( target1.dataset )
.to( { top: "+20", left: "-20" }, 2000 )
.to( { top: "+20", left: "-20" }, 1000 )
.repeat( 5 )
.delay( 500 )
.easing( TWEEN.Easing.Exponential.In )
.onUpdate( function() {
updateBox( target1, this );
})
.start();
updateBox( target1, target1.dataset );
updateBox( target1, target1.dataset );
}
function animate() {
@ -54,20 +57,17 @@
}
</script>
<style type="text/css">
.box {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
display: inline-block;
float: left;
}
#target1 {
background: #fcc;
}
</style>
</head>
<body>
<div id="info">
<h1><a href="http://github.com/sole/tween.js">tween.js</a></h1>
<h2>09 _ relative destination</h2>
<p>Demonstrating the relative feature, with repeat.</p>
</div>
<div style="position: absolute; left: 400px; ">
<div id="target1" style="position: absolute;" data-top="150" class="box">
</div>
</div>
</body>
</html>