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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy How do you replace animation with new animation after first has loaded?? anyone.

    I am in the process of building a complicated web interface and I have a problem.

    If you want to check out the site to better understand it is:
    http://www.shane-paul.co.uk

    It is going to be an art site for a client. It is the clients design.
    I have searched on forums and search engines for months and have not found any help for my problem.

    What I need to do is to load a gif anim. and then when that has loaded I need to replace it with another animation file.
    Is this possible??

    The idea is that the menu will load and automatically spin to reveal arrows that control the window scroll bar.
    The client then needs the interactive buttons to pluse and so I need to replace the original anim file with the new one.

    I just don't know how to approach this.

    The site is bieng constructed with simple technology as it is intended for use with screen readers, voice software and blind touch balls, so I have opted against flash which would solve all my problems.

    The site is a little rough at the moment but eventually I will streamline the code and it will be much slicker.

    Just hope someone can help....
    Last edited by camwood; 12-17-2005 at 12:26 PM. Reason: forgot instant notify

  • #2
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fading scrollbar linked to window position

    As well as the pulsing animations I am trying to create a new scroll bar device.

    The menu system has a shadow to create a floating over the page illusion.
    What I am trying to do is create a shadow using png files of different opacities that will link to the scrollbar position.

    The window scrollbar will eventually be hidden and the shadow will be used instead.
    The idea is to have darker images linked to the top scrollbar position and as the user scrolls down the page information the shadow will get lighter and lighter.
    Probably use 5 images.

    I just have not been able to find any help in constructing it.
    Last edited by camwood; 12-17-2005 at 12:27 PM. Reason: forgot instant notify

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    dont know the complexity of your animations but JavaScript can create annimations normally with far less codesize than the equivelent gif.

    as for the scroll bar this can be done with JS generated divs and opacity
    can give you examples of above but as a commercial application examples only

    Anyway to change an image src

    imgageobject.src='newimagefilename';

    Good practice for site to be functional with Javascript disabled

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    http://www.sitepoint.com/forums/show...ight=Animation


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips (17-12-2005) http://www.vicsjavascripts.org.uk
    
    var zxcScrollDivs=100;
    
    function zxcFillScrollBar(){
     var zxcbdy=document.getElementsByTagName('BODY')[0];
     var zxcsb=document.getElementById('zxcScrollBar');
     var zxcsbw=zxcsb.offsetWidth;
     var zxcsbh=zxcsb.offsetHeight;
     var zxcsbc=document.createElement('DIV');
     var zxcdh=Math.floor(zxcsbh/zxcScrollDivs);
     zxcbdy.appendChild(zxcsbc);
     var zxcsbcS=zxcsbc.style;
     zxcsbcS.position='absolute'
     zxcsbcS.overflow='hidden'
     zxcsbcS.width=zxcsbw+'px'
     zxcsbcS.backgroundColor='red'
     zxcsbcS.height=(zxcdh)+'px'
     zxcsbcS.left='0px'
     var zxcd; var zxct=0;
     for (var zxc0=0;zxc0<zxcScrollDivs;zxc0++){
      if (zxcd){ zxcd=zxct.offsetTop; }
      zxcd=zxcsbc.cloneNode(false);
      zxcsb.appendChild(zxcd);
      zxcd.style.top=(zxcdh*zxc0)+'px';
      zxcOpacity(zxcd,Math.ceil(100/zxcScrollDivs*(zxc0+1)))
     }
     zxcbdy.removeChild(zxcsbc);
    }
    
    
    
    function zxcOpacity(obj,op){
     if (op<0||op>100){ op=100; }
     if (obj.style.MozOpacity!=null){ obj.style.MozOpacity=(op/100)-.001; }
     else if (obj.style.opacity!=null){ obj.style.opacity=(op/100)-.001; }
     else if (obj.style.filter!=null){ obj.style.filter = 'alpha(opacity='+op+')';	}
     else if (obj.style.KHTMLOpacity!=null){ obj.style.KHTMLOpacity=(op/100)-.001; }
    }
    
    //-->
    </script></head>
    
    <body onload="zxcFillScrollBar();" >
    <div id="zxcScrollBar" style="position:absolute;width:20px;height:500px;border:solid red 1px;" ></div>
    </body>
    
    </html>
    Last edited by vwphillips; 12-17-2005 at 05:09 PM.


  •  

    Posting Permissions

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