Note that there are some explanatory texts on larger screens.

plurals
  1. POMore fun with a jQuery particle engine - lack of rotation
    primarykey
    data
    text
    <p>Hey, I have a jQuery particle engine (that I'm using as an excuse to learn about easing mostly) - but the little elements won't rotate - here's my code (and a fiddle - see bottom of question):</p> <pre><code>function rotate(degree, ele) { $(ele).css({ '-webkit-transform': 'rotate(' + degree + 'deg)'}); $(ele).css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); timer = setTimeout(function() { rotate(++degree); },5); } function particles() { var thisParticle; var particleSize = Math.floor(Math.random() * 24 + 8); var prependElement = $('body'); var speed = Math.floor(Math.random() * 2000 + 900); var distance = Math.floor(Math.random() * 500 + 200); var fallOffSpeed = speed / 2; var fallOff = distance + distance / 1.5; var top = 200; var rndR = Math.floor(Math.random() * 254); var rndG = Math.floor(Math.random() * 254); var rndB = Math.floor(Math.random() * 254); $(this).css({'background-color':'rgba('+rndR+','+rndG+','+rndB+', 1.0)'}); $(prependElement).prepend($('&lt;div&gt;', { "class" : "particles", "height": particleSize, "width": particleSize, }).css({ "background-color": "rgba("+rndR+","+rndG+","+rndB+", 1.0)", "position": "absolute", "-moz-border-radius": "1px", "border-radius": "1px", "opacity":0.75, "top": top, "z-index": "10" })); $.each($('.particles'), function () { var tmpEle = $(this); rotate(0,tmpEle); rndR = Math.floor(Math.random() * 254); rndG = Math.floor(Math.random() * 254); rndB = Math.floor(Math.random() * 254); if ($(this).css("opacity") == 0) { $(this).remove(); } else { thisOffset = $(prependElement).height()+$(this).offset().top+(top-$(this).height()); $(this).animate({ "left": [distance, 'linear'], "top": [thisOffset, 'easeOutBounce'] }, speed, 'linear').animate({ "left": fallOff, "opacity" : "0" }, fallOffSpeed, 'linear'); } }); setTimeout(particles, 250); } $(document).ready(function() { particles(); }); </code></pre> <p>[EDIT] @Howard solved my issue (I was missing the second argument on the setTimeout call). Next issue is why the rotation is a bit "funky".</p> <p><strong>NEW FIDDLE</strong>: <a href="http://jsfiddle.net/neuroflux/yLcaY/13/" rel="nofollow">http://jsfiddle.net/neuroflux/yLcaY/13/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload