Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Basic Fade Animation:

    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.

    Code:
       
    <html>
    <head>
    <title>Splash Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .Center {
    	text-align: center;
    }
    </style>
    <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];}}
    }
    </script>
    </head>
    <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">
    <tr>
    		<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="6.0.65.0">
    		  <!-- 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">
    		    <!--<![endif]-->
    		    <param name="quality" value="high">
    		    <param name="wmode" value="opaque">
    		    <param name="swfversion" value="6.0.65.0">
    		    <param name="expressinstall" value="Scripts/expressInstall.swf">
    		    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    		    <div>
    		      <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>
    	        </div>
    		    <!--[if !IE]>-->
    	      </object>
    		  <!--<![endif]-->
    	    </object></td>
    		<td rowspan="2">
    			<img src="images/index_03.jpg" width="224" height="768" alt=""></td>
    	</tr>
    	<tr>
    		<td><img src="images/index_04.jpg" width="571" height="147" alt=""></td>
    	</tr>
    </table>
    <!-- End Save for Web Slices -->
    <script type="text/javascript">
    swfobject.registerObject("FlashID");
    </script>
    </body>
    </html>
    Thanks

  • #2
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #3
    New Coder
    Join Date
    Feb 2010
    Posts
    44
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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.

    Code:
    		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.
    		}

  • Users who have thanked Skychan for this post:

    willrich (06-19-2010)

  • #4
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!
    Last edited by willrich; 06-19-2010 at 09:16 AM.

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    willrich:

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

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


  •  

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •