SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding star trail effect script to page

    I want to insert this star trail effect script, it works fine on blank page but star trail doesn't appear on most areas in this page and script corrupts several objects' position. How can I insert it successfully?

    http://www.orkinosfilm.com/melissa/index.html



    Code:
    <head>
    
    <style type="text/css">
    
    body {overflow: scroll; overflow-x: hidden;}
    
    .anyClass {
    
     position: relative;
    
     visibility: hidden;
    
     left: -5000px;
    
    }
    
    </style>
    
    
    
    </head>
    
    
    
    <body bgcolor="#000000">
    
    
    
    <p><!--webbot bot="HTMLMarkup" startspan --><script language="JavaScript1.2">
    
    <!--
    
    
    
    /*
    
    Submitted by Marcin Wojtowicz [one_spook@hotmail.com]
    
    Featured on JavaScript Kit (http://javascriptkit.com)
    
    Modified by JK to be IE7+/ Firefox compatible
    
    For this and over 400+ free scripts, visit http://javascriptkit.com
    
    */
    
    
    
    var trailLength = 10 // The length of trail (8 by default; put more for longer "tail")
    
    var path = "cursor_star.png" // URL of your image
    
    
    
    var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    
    var i,d = 0
    
    
    
    function initTrail() { // prepares the script
    
    	images = new Array() // prepare the image array
    
    	for (i = 0; i < parseInt(trailLength); i++) {
    
    		images[i] = new Image()
    
    		images[i].src = path
    
    	}
    
    	storage = new Array() // prepare the storage for the coordinates
    
    	for (i = 0; i < images.length*3; i++) {
    
    		storage[i] = 0
    
    	}
    
    	for (i = 0; i < images.length; i++) { // make divs for IE and layers for Navigator
    
    		document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '" width='+(16-i)+' height='+(16-i)+'></div>')
    
    	}
    
    	trail()
    
    }
    
    function trail() { // trailing function
    
    	for (i = 0; i < images.length; i++) { // for every div/layer
    
    		document.getElementById("obj" + i).style.top = storage[d]+'px' // the Y-coordinate
    
    		document.getElementById("obj" + i).style.left = + storage[d+1]+'px' // the X-coordinate
    
    		d = d+2
    
    	}
    
    	for (i = storage.length; i >= 2; i--) { // save the coordinate for the div/layer that's behind
    
    		storage[i] = storage[i-2]
    
    	}
    
    	d = 0 // reset for future use
    
    	var timer = setTimeout("trail()",10) // call recursively
    
    }
    
    function processEvent(e) { // catches and processes the mousemove event
    
    	if (window.event) { // for IE
    
    		storage[0] = window.event.y+standardbody.scrollTop+10
    
    		storage[1] = window.event.x+standardbody.scrollLeft+10
    
    	} else {
    
    		storage[0] = e.pageY+12
    
    		storage[1] = e.pageX+12
    
    	}
    
    }
    
    
    
    	initTrail()
    
    	document.onmousemove = processEvent // start capturing
    
    
    
    //-->
    
    </script><!--webbot bot="HTMLMarkup" endspan --></p>
    
    
    
    </body>

  2. #2
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I uploaded my page with all contents below:

    http://www.orkinosfilm.com/melissa/m.zip

    What I want to insert is this star trail effect:

    http://www.crazy-stuff.biz/side9036.html


Bookmarks

Posting Permissions

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