Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Rotating Animation with CSS

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #239754
    lewis712
    Participant

    I’m trying to get my page to look like the demo page where I got the code from. My page seems to have the outer ring move on the page and not stay looping around the inner logo. How can i fix this?

    My Page:
    http://gtconcepts.co/test/index2.html

    Demo Page:
    http://jsfiddle.net/gecko_guy/5DqkV/18/

    Thanks,
    Andy

    #239760
    Shikkediel
    Participant

    The logo’s not centered… and the animation will stay in the middle of .spin-container, not so much the page itself. That has a width of 700 pixels and the logo’s parent is 267 wide. So it should be positioned (700-267)/2 = 217 from the left, not the 250 it currently is.

    #239779
    lewis712
    Participant

    That doesn’t seem to be working either….the outer ring is still moving around the logo…but not in a uniform manner.

    #239784
    Paulie_D
    Moderator

    A Codepen.io demo would be much easier to debug than a remote link.

    Help us help you.

    #239785
    theadamparker
    Participant

    Here’s a codepen demo showing the issue:

    Rotating Animation with CSS

    #239789
    lewis712
    Participant

    Thank you for supplying that.

    Andy

    #239790
    lewis712
    Participant

    As for the js in it…I’m not sure how that works with the numbers 220 and 130, can anyone explain?

    #239877
    lewis712
    Participant

    Anyone have any thoughts on this….could really use some help.

    #239882
    bearhead
    Participant

    I think there are a couple problems:

    1. I’m not positive that in your version the logo is centered relative to the #rotator div. Maybe you need to investigate another method for centering the logo.
    2. I think something isn’t right with your javascript – it doesn’t seem like it is positioning the “small circles” correctly. It may be because the script you’re using is designed for circles rather than ovals?

    I put together this demo to demonstrate my two points. The red and yellow boxes are there so you can see how everything is centered. I removed your javascript and positioned the ovals with css (I used only four ovals to make the positioning easier math-wise).

    http://codepen.io/kvana/pen/mPwZEK

    #239883
    lewis712
    Participant

    I see what you did there. I will investigate it further in the morning, but really need 6 ovals instead of just 4. Or maybe I could do 8 to keep everything square?

    Thanks!

    #239885
    bearhead
    Participant

    ok, I looked at you javascript a little more and that does seem to be the issue. You can probably ignore what I wrote about the logo not being centered… I don’t think that is a problem anymore.

    on lines 12 and 13 of your js I changed

    x = 220 * Math.cos(angle) + 130;
    y = 220 * Math.sin(angle) + 130;

    to

    x = 220 * Math.cos(angle) + 100;
    y = 220 * Math.sin(angle) + 150;

    and it seems to look ok now:
    http://codepen.io/kvana/pen/oxwrmy

    #239909
    lewis712
    Participant

    GREAT!!! looks good, now if I need to make the circles bigger or into blocks or anything, what is the calculation for the 100 and 150 of lines 12 and 13?

    #239960
    bearhead
    Participant

    um… I actually don’t know lol. I just kind of guessed and those numbers seemed to work. Maybe someone with more JS or math knowledge could explain what’s going on.

    The only thing I know for sure is that the numbers should be equal if the rotating things are circles or squares, and the numbers should be different if they are ovals or rectangles.

    Sorry I can’t help more… trigonometric functions frighten and confuse me.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.