« STIC:Atelier graphisme, animation, interactivité et HTML5/Simple animation JS avec GSAP » : différence entre les versions
Aller à la navigation
Aller à la recherche
(Page créée avec « <source lang="HTML5"> <!doctype html> <html> <head> <title>Simple animation with GSAP</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF... ») |
mAucun résumé des modifications |
||
| Ligne 16 : | Ligne 16 : | ||
</head> | </head> | ||
<body> | <body> | ||
<!-- | <!-- définition d'une boite --> | ||
<div id="easeWrapper" style="width:800px"> | <div id="easeWrapper" style="width:800px"> | ||
<span id="thing" style="position:relative; border-style:solid; background:yellow">HELLO</span> | <!-- une chose qui va bouger dans la boite --> | ||
<span id="thing" | |||
style="position:relative; border-style:solid; background:yellow"> | |||
HELLO | |||
</span> | |||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> | ||
</source> | </source> | ||
Dernière version du 24 mars 2015 à 21:11
<!doctype html>
<html>
<head>
<title>Simple animation with GSAP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="src/minified/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="src/minified/easing/EasePack.min.js"></script>
<script type="text/javascript" src="src/minified/TweenLite.min.js"></script>
<script>
window.onload = function() {
var thing = document.getElementById("thing");
TweenLite.to(thing, 3, {left:"600px", ease:Bounce.easeOut});
}
</script>
</head>
<body>
<!-- définition d'une boite -->
<div id="easeWrapper" style="width:800px">
<!-- une chose qui va bouger dans la boite -->
<span id="thing"
style="position:relative; border-style:solid; background:yellow">
HELLO
</span>
</div>
</body>
</html>