<script type="application/ample+xml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:aml="http://www.amplesdk.com/ns/aml">
<button onclick="this.$play('left:300px', 1000);this.setAttribute('disabled', 'true')" style="position:relative;left:0px;width:130px;">normal</button>
<br />
<button onclick="this.$play('left:300px', 1000, AMLElement.EFFECT_DECELERATE);this.setAttribute('disabled', 'true')" style="position:relative;left:0px;width:130px;">with deceleration</button>
<br />
<button onclick="this.$play('left:300px', 1000, AMLElement.EFFECT_ACCELERATE);this.setAttribute('disabled', 'true')" style="position:relative;left:0px;width:130px;">with acceleration</button>
<br />
</script>
Color animation (move the mouse over the text):
Source code
<script type="application/ample+xml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:aml="http://www.amplesdk.com/ns/aml">
<div onmouseenter="this.$play('color:#dfff48, backgroundColor:#3333cd', 500);"
onmouseleave="this.$play('color:#205088, backgroundColor:#fff665', 500);" class="playcolor">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</script>
Lazy Loader manager
Pressing buttons should initiate dynamic loading content.
Pressing a button below moves the box to a corresponding position. The new location is saved in the browser history. Thus navigating browser back/forward buttons you can get box moved to the previous/next position.
If you add the page (with a box located in a position different from the initial) to the browser bookmarks and later the page from a bookmark you can see the box is located where it was when bookmarked.
