javascript transition effect

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>
transition effect
</title>
<script type=”text/javascript” xml:space=”preserve”>
//<![CDATA[
var transitionName =
[“Box In”, “Box Out”,
“Circle In”, “Circle Out”,
“Wipe Up”, “Wipe Down”];

var counter = 0;
var whichImage = true;

function blend()
{
if (whichImage) {
image1.filters( “revealTrans” ).apply();
image1.style.visibility = “hidden”;
image1.filters( “revealTrans” ).play();
}
else {
image2.filters( “revealTrans” ).apply();
image2.style.visibility = “hidden”;
image2.filters( “revealTrans” ).play();
}
}

function reBlend( fromImage )
{
counter++;

if (fromImage) {
image1.style.zIndex -= 2;
image1.style.visibility = “visible”;
image2.filters( “revealTrans” ).transition = counter % 6;
}
else {
image1.style.zIndex += 2;
image2.style.visibility = “visible”;
image1.filters( “revealTrans” ).transition = counter % 6;
}

whichImage = !whichImage;
blend();
transitionDisplay.innerHTML = “Transition ” +
counter % 6 + “: ” + transitionName[ counter % 6 ];
}
//]]>
</script>
</head>
<body onload=”blend();”>
<img id=”image2″ src=”https://designikx.files.wordpress.com/2010/01/zindex2.jpg
style=”position: absolute; left: 10px; top: 10px; width: 246px;
z-index:1; visiblity: visible; filter: revealTrans(duration=2, transition=0)”
onfilterchange=”reBlend( false )” alt=”” name=”image2″ />
<img id=”image1″ src=”https://designikx.files.wordpress.com/2010/01/zindex1.jpg
style=”position: absolute; left: 10px; top: 10px; width: 246px;
z-index:1; visiblity: visible; filter: revealTrans(duration=2, transition=0)”
onfilterchange=”reBlend( true )” alt=”” name=”image1″ />

<div id=”transitionDisplay” style=”position: absolute; top: 70px; left: 80px;”>
play it
</div>
</body>
</html>

 

as we use here the inbuilt functions of IE ..it only works on IE. So if any one knows how to remove this drawback …plz let me know.
Thanks

——————————————-
Like this Page on Facebook : – https://www.facebook.com/littlewelt

Advertisements

javascript fade in / out effect

This is image only :

click here to download sourc code (doc format)
——————————————-
Like this Page on Facebook : – https://www.facebook.com/littlewelt

Create a Cute Little Tiger in Illustrator

The tiger is one of the coolest animals in the earth. It’s a very powerful, dangerous, yet fascinating animal. In this tutorial, we will be drawing the tiger, but we will be doing it a little bit different. Instead of portraying the tiger as a savage and mean creature, I will teach you how to draw a cute little tiger that you will be able to use in your projects, as a desktop wallpaper, etc. You will also learn lots of Illustrator techniques as well. This is the perfect tutorial for year 2010, the year of the tiger. So what are we waiting for? Let’s begin, r-r-r-r…

by Design Informer

read more…

Web 2.0 Standards

Web 2.0 Standards

what is it?
The web 2.0 standard is just similar to ISO/ISI standards. Difference is only, Web 2.0 works for “web” world. It defines, how a web site should be appear, work. It works on “deliver more using less”.

Following are the points are taken in consideration while designing as per web 2.0 standards:
1) Simplicity
2) Centrally Positioned
3) Less Columns
4) Distinct sections (header, footer, content section)
5) Simple navigation
6) Bold logos
7) Big text
8 ) Color selection
9) Quality design (visual effects, icons etc.)

read more details on
http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide.php

%d bloggers like this: