View Full Version : Basic Fade Animation:

06-19-2010, 12:42 AM
I am trying to make a basic fade animation for my website redonepro.com using JavaScript. This is my first website, and I know how to animate via After Effects, and how to export SWF files for the website. I want to use code that is a bit lighter and can load on more browsers; like iPad etc...

The effect I want to use is on my site redonepro.com
Here is my source code:
Basically I just want to fade between two jpgs on a continuous loop.

<title>Splash Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.Center {
text-align: center;
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
<body bgcolor="#FFFFFF" topmargin="0" marginwidth="0" marginheight="0" class="Center">
<!-- Save for Web Slices (Splash Page.psd) -->
<table width="1024" height="768" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<td rowspan="2">
<img src="images/index_01.jpg" width="229" height="768" alt=""></td>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="571" height="621" id="FlashID" title="Animation">
<param name="movie" value="Flash/Splash Page Animation.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you donít want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Flash/Splash Page Animation.swf" width="571" height="621">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="">
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
<!--[if !IE]>-->
<td rowspan="2">
<img src="images/index_03.jpg" width="224" height="768" alt=""></td>
<td><img src="images/index_04.jpg" width="571" height="147" alt=""></td>
<!-- End Save for Web Slices -->
<script type="text/javascript">


06-19-2010, 03:29 AM
No offense no offense at all, but for the most part people don’t want to read Entire giant huge codes like that so it’s best to put in just the piece of code that you want fixed, nice logo though on your main page

06-19-2010, 05:45 AM
Well, it's not too much code to read through, but I'm not going to right now cuz I'm lazy. But I'll get you some code. Here's a good function for setting opacity that is widely compatible, AFAIK.

Window.setOpacity = function (obj, opacity) {

obj.opacityValue = opacity;
// IE/Win
obj.style.filter = "alpha(opacity="+opacity+")";

// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;

if(opacity == 100 && obj.style.removeAttribute)
obj.style.removeAttribute("filter");//Even if set to 100 alpha, IE will not do text AA, so we remove the filter
obj.style.zoom = 1;//This fixes an interesting bug in IE7 where it won't set the
//opacity if the element isn't positioned.

06-19-2010, 08:54 AM
Yeah, sorry about the excessive code. I wasn't sure how much to include. And thanks for the reply.

So how do I program a loop to give the constant cycle? I am just looking for an example so I can study it.
I am a complete noob to JavaScript, though it is bringing some flashbacks from my C++ days. Thanks!

06-19-2010, 02:21 PM

See attached complete application: Circular Fading Images with Optional Caption.

Edit the .....config.js file for your images, path, etc.