- This topic is empty.
March 24, 2016 at 11:36 am #239754
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?
AndyMarch 24, 2016 at 3:40 pm #239760ShikkedielParticipant
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 = 217from the left, not the 250 it currently is.March 25, 2016 at 9:27 am #239779
That doesn’t seem to be working either….the outer ring is still moving around the logo…but not in a uniform manner.March 25, 2016 at 10:48 am #239784Paulie_DMember
A Codepen.io demo would be much easier to debug than a remote link.
Help us help you.March 25, 2016 at 10:57 am #239785March 25, 2016 at 11:11 am #239789
Thank you for supplying that.
AndyMarch 25, 2016 at 11:20 am #239790
As for the js in it…I’m not sure how that works with the numbers 220 and 130, can anyone explain?March 28, 2016 at 11:44 am #239877
Anyone have any thoughts on this….could really use some help.March 28, 2016 at 2:00 pm #239882
I think there are a couple problems:
- 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.
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!March 28, 2016 at 2:32 pm #239885
on lines 12 and 13 of your js I changed
x = 220 * Math.cos(angle) + 130;
y = 220 * Math.sin(angle) + 130;
x = 220 * Math.cos(angle) + 100;
y = 220 * Math.sin(angle) + 150;
and it seems to look ok now:
http://codepen.io/kvana/pen/oxwrmyMarch 29, 2016 at 9:00 am #239909
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?March 30, 2016 at 2:39 pm #239960
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.
- The forum ‘CSS’ is closed to new topics and replies.