javascript - Animating array of divs; only the final element is modified -
this baffling me @ moment.
i'm experienced programmer looking throw bit of surprise fiancee on countdown page our wedding. desired effect simulated confetti falling behind main page. setup follows:
i have array of divs in javascript. each div absolutely positioned on page. have interval set updates every 50 or milliseconds. on each tick, run loop on array of divs, , calculations , update positions.
problem problem having, however, though can see divs created, stored array, , modified (in case, each has slight randomized rotation) during initialization phase, once tick update position starts, div stored in whatever last slot of array gets position updated. tried hard-coding each div index testing purposes, strictly last element update position. upon printing current "left" , "top" style values each div before , after calculations shows value has been changed, no visible change noticeable. here's basic code:
javascript
var container; // div have other divs attached var conf = new array(); // array of divs modify var rots = new array(); // rotation of each div var vels = new array(); // velocity of each div var xpos = new array(); // current x value of position in pixels var ypos = new array(); // current y value of position in pixels var xvels = new array(); // x portion of velocity var yvels = new array(); // y portion of velocity function initialize() // attached onload event on <body> tag { container = document.getelementbyid("conf_container"); confettiinit(); // creates, initializes, , displays each div setinterval(updateconfetti, 42); } function confettiinit() { screenheight = window.innerheight; screenwidth = window.innerwidth; (var = 0; < 25; ++) // create 25 confetti flakes { // append div in container unique id container.innerhtml += "<div class='conf' id='conf_" + + "'></div>"; // store element in array conf[i] = document.getelementbyid("conf_" + i); // ensure confetti in background, , each z index unique conf[i].style.zindex = -i - 1; xpos[i] = window.innerwidth * math.random(); // calculate random x position conf[i].style.left = xpos[i] + "px"; // set x position of div ypos[i] = -40; // y position above screen conf[i].style.top = ypos[i] + "px"; // set y position of div // calculate random amount of rotation (-30 30 degrees) rots[i] = math.random() * 60*(math.pi/180) - 30*(math.pi/180); // set rotation of div conf[i].style.webkittransform = "rotate(" + -rots[i] + "rad)"; vels[i] = math.random() * 3 + 2; // calculate random velocity (2-5) xvels[i] = vels[i] * math.sin(rots[i]); // x portion of velocity yvels[i] = vels[i] * math.cos(rots[i]); // y portion of velocity } } function updateconfetti() { (var = 0; < 25; ++) { xpos[i] += xvels[i]; // calculate new x position ypos[i] += yvels[i]; // calculate new y position conf[i].style.left = xpos[i] + "px"; // set div's x position conf[i].style.top = ypos[i] + "px"; // set div's y position // if confetti piece leaves viewing area... if (xpos[i] < -50 || xpos[i] > window.screenwidth + 10 || ypos[i] > window.screenheight + 10) { // send top , reinitialize xpos[i] = window.innerwidth * math.random(); conf[i].style.left = xpos[i] + "px"; ypos[i] = -40; conf[i].style.top = ypos[i] + "px"; rots[i] = math.random() * 60*(math.pi/180) - 30*(math.pi/180); conf[i].style.webkittransform = "rotate(" + -rots[i] + "rad)"; vels[i] = math.random() * 3 + 2; xvels[i] = vels[i] * math.sin(rots[i]); yvels[i] = vels[i] * math.cos(rots[i]); } } } css
div.conf { height: 29px; width: 50px; background-image: url("images/confettiyellow.gif"); position: absolute; } #conf_container { left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; overflow: hidden; }
it's wrong divs creation. start works if in conventional way, this:
var d = document.createelement("div"); d.classname = "conf"; container.appendchild(d); conf[i] = d; 
Comments
Post a Comment