Forums

marianico2

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

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

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

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.

treehouse : what would you like to learn today?

Forums

How to rotate images in circles doing jerks?