How to rotate images in circles doing jerks?

[marianico2]

I need to make a animation like the one in the *Make people happy* section in the next web:

https://layervault.com/

But instead of making the form of an eight, I need to do a simple circle.
It’s made using CSS3, but I can do it with jQuery too (I don’t mind the technique if I get the desired result).

I found this code that makes a similar effect coded in jQuery:

var t = 0;

function moveit() {
t += 0.05;

var r = 100;
var xcenter = 100;
var ycenter = 100;
var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
var newTop = Math.floor(ycenter + (r * Math.sin(t)));

$(‘.rotate’).animate({
top: newTop,
left: newLeft,
}, 1, function() {
moveit();
});
}

$(document).ready(function() {
moveit();
});

See it in jsfiddle:
http://jsfiddle.net/W69s6/810/

But as you will see, this example is doing continous loop, and I want to move the image doing jerks. I mean, stoping and starting every second.

Also I’d have be more images rotating at the same time, like in the example provided from layervault.com in the begining of this post.

Could you give me some advice or example to obtain this particular effect?

Thanks in advance.

[marianico2]

nobody?

[Mottie]

Hi @marianico2!

This took a bit of work but here is some basic code to get what you need… please read through the comments in the code – [demo here](http://codepen.io/Mottie/pen/GDmCk)

var stops = 5, // number of stops around the circle
delay = 1000, // time to pause in milliseconds
animationDelay = 10, // animation time between steps
step = 0.05, // in radians
img = $(‘.rotate’), // target images
r = 100, // radius
xcenter = 100, // x offset
ycenter = 100, // y offset

// *** don’t change variables below ***
last,
d = 0,
t = 0,
i = 1,
angledStops = 360/stops,
RadToDeg = 180 / Math.PI,
stop = angledStops;

// this evenly spaces out all images with the class rotate around the circle
function setup() {
// 270 degrees is actually the top of the circle
var start = 270 * Math.PI/180,
spacing = 2 * Math.PI / img.length;
img.each(function () {
$(this)
.data(‘pos’, start) // save the position of each image
.css({
top: Math.floor(ycenter + (r * Math.sin(start))),
left: Math.floor(xcenter + (r * Math.cos(start)))
});
start += spacing;
});
}

function moveit() {
t += step;
last = d;
d = Math.round(t * RadToDeg) % 360;
$.when(
img.each(function () {
var $t = $(this),
pos = $t.data(‘pos’) + step;
$t
.data(‘pos’, pos)
.animate({
top: Math.floor(ycenter + (r * Math.sin(pos))),
left: Math.floor(xcenter + (r * Math.cos(pos)))
}, animationDelay);
})).then(function () {
if (d > stop || d < last) {
i++;
if (i > stops || d < angledStops) {
stop = angledStops;
i = 1;
} else {
stop = angledStops * i;
}
setTimeout(moveit, delay);
} else {
moveit();
}
});
}

$(document).ready(function () {
setup();
moveit();
});

[Mottie]

Something else I found that might interest you is [this post](http://benknowscode.wordpress.com/2012/09/24/aligning-dom-elements-around-a-circle/)

[marianico2]

You’re really awesome @Mottie! Thanks for all, is exactly what I wanted! By the by, what do you think would be the best way to do it: css or jquery?

[Mottie]

Well css of course, but then it wouldn’t work in older browsers. That site you linked is using css3 animation btw.

[marianico2]

Ok, then I’ll use css. I have two more little questions for you:

1.- Why css3 instead jQuery? Maybe it spends less resources?
2.- If I use css3 I have to do keyframes and put the cordinates one by one.
there is any way to facilitate this work? If I have 7 diferent positions I’ll need the coordinates of a heptagon, for example, and that would be tedius, isn’t it?

Thanks for all, mate.

[Author]

Posts