Grow your CSS skills. Land your dream job.

How to rotate images in circles doing jerks?

  • # March 14, 2013 at 3:02 pm

    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.

    # March 14, 2013 at 5:46 pm

    nobody?

    # March 14, 2013 at 6:38 pm

    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();
    });

    # March 14, 2013 at 6:43 pm

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

    # March 14, 2013 at 6:52 pm

    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?

    # March 14, 2013 at 6:57 pm

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

    # March 14, 2013 at 8:19 pm

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".