How do I get a CSS object to move using Javascript?

Question

I am trying to make a JavaScript game and I need a CSS object with an animation to move in place of an object I originally made using JavaScript. Basically, what I want to happen is have my "sword" CSS object move with my player object when I have it Unsheathed. I have been looking for a while and they only give me a result as to were it will be when the page is loaded. I need the sword to always be moving with the player. If my code is needed, tell me, and I will provide it. If you have any questions, feel free to ask. I am pretty new so go easy on the terrible JavaScript that may be provided.

PLEASE USE AN EXAMPLE RELATED TO MY CODE!
if you don't I probably wont understand what is going on....

Thank You in Advance

Answer 1

Focusing the the following element of your example I am only going to address CSS here...

....
    <div class="player"></div>
    <div id="swordl"></div>
    <div id="swordr"></div>
....

To move #swordl and #swordr along with .player you can take advantage of a feature of the CSS position attribute.

When a containing element has CSS position: relative; children of that element with the CSS position: absolute; are positioned with reference to the top-left corner of the parent.

In the following example #player would be the parent, and #swordl and #swordr would be the children...

....
    <div id="player">
        <div id="swordl"></div>
        <div id="swordr"></div>
    </div>
....

/* CSS */
#player {
    position: relative;
}

#swordl, #swordr {
    position: absolute;
}

#swordl {
    left: 4px;
    top: 2px;
}

#swordr {
    left: 12px;
    top: 2px;
}

Note the change of class to id in 'player'

Now, whenever you animate the position of #player the two #swords will maintain their position relative to the top-left corner of their containing parent element: you will not have to animate the position of #swords explicitly.

Hope that helps. ;)

---

• CSS position @ MDN

Answer 2

You can use the transistion . I have included a couple examples. One example is just JavaScript, the other is not just JavaScript.

 //Get Element By Id of 'movingdiv' var div = document.getElementById('movingdiv'); //Create the timeout (not required) setTimeout(function() { //Change the style.top to 50%, You can also do this in px div.style.top = '50%'; //Change the style.top to 50%, You can also do this in px div.style.left = '50%'; //Add the transform so it can be centered in the viewport div.style.transform = 'translate(-50%,-50%)'; //Add the timeout below in milliseconds. }, 1000)

 #movingdiv { width: 100px; height: 100px; background: black; position: absolute; top: 10px; left: 10px; transition: all 2s; }

 <div id='movingdiv'></div>

 //Create a div var div = document.createElement('div'); //Give the div some style. IMPORTANT: notice the transition div.style = 'width: 100px; height: 100px; background: black; position: absolute; top: 10px; left: 10px; transition: all 2s;'; //Append the div to the body document.body.appendChild(div); //Create a timeout for the div to move setTimeout(function() { //Change the style.top to 50%, You can also do this in px div.style.top = '50%'; //Change the style.top to 50%, You can also do this in px div.style.left = '50%'; //Add the transform so it can be centered in the viewport div.style.transform = 'translate(-50%,-50%)'; //Add the timeout below in milliseconds. }, 1000)