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.

View Poll Results: What do you think of this code?

Voters
7. You may not vote on this poll
  • The Best!

    3 42.86%
  • Pretty Good...

    1 14.29%
  • Its's ok - I suppose

    3 42.86%
  • Why is this even here?

    0 0%
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Feb 2003
    Location
    South Africa
    Posts
    251
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Motion Blur Iamge Warp Logo Curve

    This script creates a motion blur effect of a moving object - Downgrades very well with others.

    You must look at a sample to see what it is and how nice it is.
    All you need to do is put the code bellow in the body section of your page... Instructions are in the code to change properties...

    Go to http://free.7host04.com/logocurve/index.html for the LogoCurve generator to view samples and work out what you need
    - It makes life a LOT easier!!

    Hope you enjoy!
    David
    Code:
    <script language="JavaScript">
    <!--Hide
    /*
        LOGO CURVE Version 3.2 
        24.01.2003
        Writen by David Bann - South Africa
        e-mail: david@ftgconsulting.co.za
    
        Feel free to use this code, but please email me the website it is used on,
        and leave this commenting in tact. Thank you!
        Please let me know of any bugs or if you edit the script.
    
        Additions since version 3.1:
         - Added chengeable formulas for curve.
         - Added changeable event at which the script is initiated.
    
        Things to come:
         - Better use of layers - will use less layers, but still get same
           effect... (User will be able to specify how many layers to be used,
           adding more functionality and effects, as well as performance)
         - I want to add an option of document boundaries for the curve,as to stop
           the logo from going out of the document and dissapearing totaly.
    	 - Fade to work in browsers other then IE.
    */
    
    //----------------------- Start Customizable Variables -----------------------//
    //=== Positioning ===//  
    var left = 0;		// Starting left position
    var top = 20;		// Starting left position
    
    //=== Curve and Distance ===//
    var topInc = 5;		// Incriment of top position
    var leftInc = 5;		// Incriment of left position
    
    /* Make both the horizontal curve and the vertical curve the same to..
    .. get an increasing gap with no curve. */
    var hor_curve = 20;		// Horizontal curve - 0 for no curve
    var ver_curve = -20;		// Vertical curve - 0 for no curve    
    
    //=== Timing and Other ===//
    var noTimes = 50;		// Number of times the picture is shown
    var waitTime = 1;		// Time delay
    
    var layer = 2;		// Layer level
    var picture = 'smalllogo.gif';		// Picture to display (Smaller images work better)
    
    var start_retracted= true;		// Start the image retracted (true / false)
    var retract= true;		// Retract from behind after expanding (true / false)
    
    //=== Fade options (Only IEusers see fade) ===//
    var fade = true;		// Gradual Fade (true / false) - Only works if retract =true
    var fd_destop = 0;		// Destination transparency level (ie 80, for mostly solid)
    var fd_rate = 10;		// Time in milliseconds between trasparency changes (best under 100)
    var fd_delta = 5;		// Amount of change each time (ie 5, for 5% change in transparency)
    
    var event_init = 'onClick';		// Event at which the script is initiated
    var left_formula = '(left + leftInc) + ((count/100) * hor_curve)';		// Left position formula
    var top_formula = '(top + topInc) + ((count/100) * ver_curve)';		// Top position formula
    //----------------------- End Customizable Variables -----------------------//
    //--------------------- DO NOT EDIT BEYOND THIS POINT! ---------------------//
    
    var count = 0;
    var count2 = 0;
    var timeOutVal = waitTime * 10;
    var txt;
    var image;
    var imageName;
    var lay = new Array;
    
    function addLayer(){
      left = eval(left_formula);
      top = eval(top_formula);
    
      txt = "<div id='Layer" + count + "' style='position:absolute; visibility:hidden; left:" + left + "; top:" + top + ";   z-index:" + layer + "'>";
      txt += "<a href='#' " + event_init + "='replay()'><img src='" + picture + "' border=0 style='filter:alpha(opacity=100)' name = 'Image" + count + "'></a>";
      txt += "</div>";
    
      document.write(txt);
    
      lay[count]=new lib_obj("Layer"+count);
    }
    
    function logoCurveInit(){
      while (count < noTimes) {
        addLayer();
        count++;
      }
      count = 0;
    
      lay[0].showIt();
    
      if (!start_retracted) 
        animate();
    }
    
    function animate(){
      if (start_retracted) {
        if (!retract){
          if (count > 0){
            setTimeout('animate()',timeOutVal);
    
            lay[count].hideIt();
    
            count--;
          }
        }
        else{
          if (count >= 0){
            setTimeout('animate()',timeOutVal);
    
            lay[count].showIt();
    
            if (count != 0)
              fadeImage();
    
            count--;
          }
        }
    
        if (retract){
          if(count==0)
            retractIt();
        }
      }
      else{    
          if (count < noTimes){
            setTimeout('animate()',timeOutVal);
    
            lay[count].showIt();
    
            if (count != noTimes-1 && retract)
              fadeImage();
    
            count++;
          }
    
          if (retract){
            if (count == noTimes)
              retractIt();
    
          }
      }  
    }
    
    function replay(){
      if ((count == noTimes || (count == 0 || count == -1)) &&(count2 == noTimes-1 || count2 == 0)){
        start_retracted = !start_retracted;    // Make the value opposite of what it is
    
        make_all_visible();
    
        if (start_retracted){
          count = noTimes-1;
        }
        else {
          count = 0;
        }
      
        animate();
      }
    }
    
    function retractIt(){
        if (start_retracted) {  // If the logo is not retracted (showing all the layers)
          if (count2 > 0){
            setTimeout('retractIt()',timeOutVal);
            lay[count2].hideIt();
            count2--;
          }
        }
        else{            // If the logo is retracted (Only showing the first layer)
          if (count2 < noTimes-1){
            setTimeout('retractIt()',timeOutVal);
            lay[count2].hideIt();
            count2++;
          }
        }
    }
    
    function fadeImage(){
      if (fade){
        if (count >= 0 && count <= noTimes){
          image = document.images['Image' + count];
          nereidFade(image,fd_destop,fd_rate,fd_delta);
        }
      }
    }
    
    function make_all_visible(){
      for (var i = 0; i< noTimes ; i++){
        if (document.images['Image' + i].style.MozOpacity){
          document.images['Image' + i].style.MozOpacity=100;
        }
        else if (document.images['Image' + i].filters) {
          document.images['Image' + i].filters.alpha.opacity = 100;
        }
      }
    }
    ////***************(DHTMLCentral.com)****************////
    function check_browser(){
      this.ver=navigator.appVersion
      this.agent=navigator.userAgent
      this.dom=document.getElementById?1:0
      this.opera5=this.agent.indexOf("Opera 5")>-1
      this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
      this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
      this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
      this.ie=this.ie4||this.ie5||this.ie6
      this.mac=this.agent.indexOf("Mac")>-1
      this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
      this.ns4=(document.layers && !this.dom)?1:0;
      this.bw=(this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5)
      return this
    }
    bw=new check_browser()
    function show_message(txt){alert(txt); return false}
    function lib_obj(obj,nest){ 
      if(!bw.bw) return show_message('Old browser')
      nest=(!nest) ? "":'document.'+nest+'.'
      this.evnt=bw.dom? document.getElementById(obj):
        bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;   
       if(!this.evnt) return show_message('The layer does not exist ('+obj+')'
        +'- If your using Netscape please check the nesting of your tags!')
      this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt; 
      this.ref=bw.dom||bw.ie4?document:this.css.document;
      this.x=parseInt(this.css.left)||this.css.pixelLeft||this.evnt.offsetLeft||0;
      this.y=parseInt(this.css.top)||this.css.pixelTop||this.evnt.offsetTop||0
      this.w=this.evnt.offsetWidth||this.css.clip.width|| this.ref.width||this.css.pixelWidth||0; 
      this.h=this.evnt.offsetHeight||this.css.clip.height|| this.ref.height||this.css.pixelHeight||0
      this.c=0
      if((bw.dom || bw.ie4) && this.css.clip) {
      this.c=this.css.clip; this.c=this.c.slice(5,this.c.length-1); 
      this.c=this.c.split(' ');
      for(var i=0;i<4;i++){this.c[i]=parseInt(this.c[i])}
      }
      this.ct=this.css.clip.top||this.c[0]||0; 
      this.cr=this.css.clip.right||this.c[1]||this.w||0
      this.cb=this.css.clip.bottom||this.c[2]||this.h||0; 
      this.cl=this.css.clip.left||this.c[3]||0
      this.obj = obj + "Object"; eval(this.obj + "=this")
      return this
    }
    lib_obj.prototype.showIt = function(){this.css.visibility="visible"}
    lib_obj.prototype.hideIt = function(){this.css.visibility="hidden"}
    lib_obj.prototype.writeIt = function(text,startHTML,endHTML){
        if(bw.ns4){
        if(!startHTML){startHTML=""; endHTML=""} this.ref.open("text/html"); 
        this.ref.write(startHTML+text+endHTML); 
        this.ref.close()
        }else this.evnt.innerHTML=text
    }
    ////***************(DHTMLCentral.com)****************////
    /* Code taken from DynamicDrive.com (Start)-->
    Gradual-Highlight Image Script II- 
    By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca)
    For full source to script, visit http://dynamicdrive.com */
    nereidFadeObjects = new Object();nereidFadeTimers = new Object();
    function nereidFade(object, destOp, rate, delta){
    if (!document.all)return
        if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return;}
        clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity;
        direction = 1; if (object.filters.alpha.opacity > destOp){direction = -1;}
        delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta;
        if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object;
            nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    	}
    }
    // <-- Code taken from DynamicDrive.com (End)
    window.onload=new logoCurveInit();
    //-->End Hide
    </script>

  • #2
    New Coder
    Join Date
    Nov 2002
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great work, how the hell did you do that lol.
    &#187; &#240;, Ŵħąŧ&#191; &#221;őų łįķę&#191;

  • #3
    Supreme Overlord Spookster's Avatar
    Join Date
    May 2002
    Location
    Marion, IA USA
    Posts
    6,273
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Error: Line 522 Function Expected

    on IE6.0 WinXP
    Spookster
    CodingForums Supreme Overlord
    All Hail Spookster

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    676
    Thanks
    1
    Thanked 0 Times in 0 Posts
    /me just a whispers® to dav...
    "quote...Click here for a working example of the script if this page does not work...endquote"

    ummm...just a 404® :O(((

  • #5
    Regular Coder
    Join Date
    Feb 2003
    Location
    South Africa
    Posts
    251
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Spookster
    Error: Line 522 Function Expected

    on IE6.0 WinXP
    Because of the script being hosted on a free server, i had to use some anti-popup code - this created that small function expected error, but it doesnt effect the script...

  • #6
    Regular Coder
    Join Date
    Feb 2003
    Location
    South Africa
    Posts
    251
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by justame
    /me just a whispers® to dav...
    "quote...Click here for a working example of the script if this page does not work...endquote"

    ummm...just a 404® :O(((
    Sorry about that - i have fixed it now... You could have gone to the menu on top - Logo Curve, Non-ASP Sample... It goes to the same place.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Uhh, it's cool, but why? Just because?
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #8
    New Coder
    Join Date
    Nov 2002
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If used correctly this could add great effects to websites, image galleries, and webpage intros.
    &#187; &#240;, Ŵħąŧ&#191; &#221;őų łįķę&#191;

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by tempest1
    If used correctly this could add great effects to websites, image galleries, and webpage intros.
    that's true, I suppose it has it's place. Nice piece of work
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    I also got the same error in IE5.5. I think the error might be in line:

    window.onload=new logoCurveInit();

    logoCurveInit() is not a constructor function. I think it should be:

    window.onload=logoCurveInit;

  • #11
    Regular Coder
    Join Date
    Feb 2003
    Location
    South Africa
    Posts
    251
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Any suggestions?

    Originally posted by glenngv
    I also got the same error in IE5.5. I think the error might be in line:

    window.onload=new logoCurveInit();

    logoCurveInit() is not a constructor function. I think it should be:

    window.onload=logoCurveInit;
    I have tried that, but then there is the problem of the script re-writing the entire document code - ie no HTML tags and stuff - only what document.write puts out... It only seems to work correctly as is. And there is no error if i run it from my own computer, only when it is on this free server with anti popup code...

    Any suggestions?

  • #12
    New Coder
    Join Date
    Nov 2002
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Could you just use document.body.innerHTML+= in place of document.write to fix it?
    &#187; &#240;, Ŵħąŧ&#191; &#221;őų łįķę&#191;

  • #13
    Regular Coder
    Join Date
    Feb 2003
    Location
    South Africa
    Posts
    251
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by tempest1
    Could you just use document.body.innerHTML+= in place of document.write to fix it?
    No - the problem is that none of the functions are on the page anymore - only the output of the initialization function... So i have all these layers and image links, but no more javascript on the page...

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    just call logoCurveInit() as the page loads where you want the layers and links to be placed at..

    ...
    <body>
    ...
    <script>
    logoCurveInit();
    </script>
    </body>


  •  

    Posting Permissions

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