After struggling to use jquery plugins for smooth motion with the div elements I'm working on, I've decided it's time to seek some assistance.
I have a group of div elements that all share a class and I want them to move around the screen continuously (similar to this fiddle I came across). The techniques used in that fiddle work well for Raphael vector graphics but not so much for CSS elements (I did attempt it being the noob that I am).
The challenging part is this - I want each element to rotate so that their "top" always faces the direction of motion. This aspect is proving to be quite difficult for me (especially since I haven't done trigonometry since high school).
So, how can I achieve the rotation and translation of a div element as described? Since I already use jquery elsewhere on the page, I'd prefer to stick to jquery without adding any other frameworks.
As a side note, I tried using move.js, but it seems to only support absolute translations, not relative ones. This results in my element moving during the first interval but then staying in place during subsequent intervals. With random translations, it just bounces around within a fixed box. I am currently experimenting with minimit Anima, yet the outcome appears to be similar. I use the jquery .each() method to move each element separately (which works relatively well). At present, I am trying to create a vector (angle and distance) and apply some trigonometry to derive (relative) translation coordinates.
:edit: Check out this fiddle containing the translation/rotation code I've been working on, utilizing CSS3 transforms and jquery's .animate(). Unfortunately, I haven't had any success yet, and the lack of progress is disheartening. Note: I'm only using the webkit transform at present; cross-browser compatibility will be addressed once I get it functioning.
:edit: Removed the full code - the snippet from the fiddle should suffice :/edit:
setInterval('moveMoth()', 100);
var moveX, moveY, moveH, angle;
var i = 0;
function moveMoth() {
$(".mothwrap").each(function () {
if (angle) {
angle = ran(-15, 15) + angle;
} else {
angle = ran(-15, 15);
}
moveH = ran(20, 60);
moveX = (Math.cos(angle * Math.PI / 180)) * moveH;
moveY = (Math.sin(angle * Math.PI / 180)) * moveH;
$(this).children('.mothdiv').css({
WebkitTransform: 'rotate(' + angle + 'deg)'
});
$(this).animate({
left: '+=' + moveX,
top: '+=' + moveY
}, 500);
$("#mothbox").append("Interval");
});
}