CODEWITHSUNDEEP
javascripthtmlcsscss-animations
samayo
samayo

Reputation: 16495

Affecting the motion of a div container with another moving div

Sorry for the confusing title. But, you can see here a JsFiddle DEMO What I mean.

What I am trying to achieve is to, move the black container as soon as it gets in contact the red container container. Meaning, I don't want the red container to overlap with the black on, I am trying to move the red, relative to the position of the red on. I am probably certain this can be achieve using normal CSS with float/margin/display adjustments, that I am unable to produce now.

Here is the code:

JavaScript

var speed =80, deg=0, center={x:50,y:50},
        moveBox = function(){
            var el = document.getElementById("circle"),
                left = el.offsetLeft,
                moveBy = 3; 
                deg+=moveBy;
                el.style.left =center.x+Math.floor(40*Math.sin(deg/150*Math.PI))+"px";
                el.style.top =center.y+Math.floor(20*Math.cos(deg/150*Math.PI))+"px";
        };

var timer = setInterval(moveBox, speed);

HTML 

<div id='square'></div>
<div id='circle'></div>

CSS

#circle{background:red; display:inline-block; width:80%; height:40px; position:absolute; border:1px solid #454545; margin-top:100px;}
#square{width:60px; height:50px; background:black; display:block; position:relative; position:absolute; margin-left:100px; margin-top:100px;}

Upvotes: 0

Views: 189

Answers (1)

MrJustin
MrJustin

Reputation: 1076

I've been toying with this on your Fiddle and it seems very untaskable at the moment. To fix problems of divs moving when animations are done, you put a relative/absolute css position on them. But when doing that to yours, it breaks the darn Circle.

So, if you can figure out how to make the circle work without a css position like so, then it should work itself out. Sorry for the lack of finding a simple solution for you.

Upvotes: 1

Related Questions