• Entries (RSS)
  • Comments (RSS)

Animations in JavaScript

Posted by | Posted in JavaScript | Posted on 25-02-2013

Tagged Under :

Websites are so generic when they have nothing but texts and images for presentation. Without any flashy designs and nifty innovations in w3, people would tend to look away and just look for other websites that have those cool lightshows and animations to feature. If you’re a master in the lore of Javascripts, then you might still be able to capture people’s attention and make them stay.

Do take note that programming is by no means easy. It requires hard work, patience, and hundreds to thousands of laborious hours just to get things done. So before you begin, prepare yourself and savor your final moments before heading to programming hell.

1. Show Loading Progress Percentage

<script language="JavaScript" type="text/JavaScript">function showprogress() {if (document.images.length == 0) {returnfalse;}var loaded = 0;for (var i=0; i<document.images.length; i++) {if (document.images[i].complete) {loaded++;}}varpercentage = Math.round(100 * loaded / document.images.length);document.getElementById("progress").innerHTML =percentage + "% loaded";if (percentage == 100) {window.clearInterval(ID);}}var ID = window.setInterval("showprogress();", 500);</script><p name="progress">0% loaded</p>

2. Create an Animated Progress Bar

<script language="JavaScript"type="text/JavaScript">function progress() {if (document.images["bar"].width < 200) {document.images["bar"].width += 5;document.images["bar"].height = 5;} else {clearInterval(ID);}}var ID;window.onload =function() {ID = setInterval("progress();", 500);}</script><img src="black.gif" name="bar" />

3. Animation Images With Javascript

<script language="JavaScript" type="text/JavaScript">var urls;function animate(pos) {pos %= urls.length;document.images["animation"].src = urls[pos];window.setTimeout("animate(" + (pos + 1) + ");", 500);}window.onload = function() {urls = new Array("0.png", "1.png", "2.png", "3.png","4.png", "5.png", "6.png");animate(0);}</script><img src="0.png" name="animation" />

4. Preload Images With Javascript

<script language="JavaScript"type="text/JavaScript">function preloadImage(url) {var i = new Image();i.src = url;}</script><body onload="preloadImage('active.gif');"></body>

5. Preloading Multiple Images in Javascript

<script language="JavaScript"type="text/JavaScript">function preloadImages(urls) {var img = new Array();for (var i=0; i<urls.length; i++) {img[img.length] = new Image();img[img.length - 1].src = urls[i];}}window.onload = function() {var img = new Array("active.gif", "inactive.gif", "other.gif");preloadImages(img);}</script>

6. Change Images On Mouse Over and Out in Javascript

<script language="JavaScript"type="text/JavaScript">function changeImage(name, url) {if (document.images[name]) {document.images[name].src = url;}}</script><imgname="myImage"src="inactive.gif"onmouseover="changeImage('myImage', 'active.gif');"onmouseout="changeImage('myImage', 'inactive.gif');"/>

7. Create Mouse Sensitive Buttons in Javascript

<img src="inactive.gif"onmouseover="this.src='active.gif';"onmouseover="this.src='inactive.gif';" />

Share

Read More

Post a Comment