Using Curly Braces to move like objects..JS

1

Hello,
So I am trying to make these braces { } to come in at a different intervals. I’m able to create and move a object but I am not quite sure on how to make the braces move like an object would. Would someone please help me?

Thanks

1 Like
2

Could you post your code and explain in a bit more detail exactly what you’re trying to do?

1 Like
3

My apologies mate for the late response, and thank you for the reply. The code is a simple one I got from W3schools. However, instead of the box I would like it to be a Curly Brace. For my presentation I would like to have words in the middle of the page and then have one curl brace come from the left of the screen and the other to come in from the right side. Example would be… { While }

ps the code is showing terribly on here and so I provided the link for you. set pos = 150 instead of 350

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p>
<button onclick="myMove()">Click Me</button>
</p> 

<div id ="container">
<div id ="animate"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 25;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 150) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
    }
  }
}
</script>

</body>
</html>

https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3

5

Add and remove these lines and you’ll get a large { that slides from left to right.

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
-  width: 50px;
-  height: 50px;
  position: absolute;
-  background-color: red;
+  font-size: 4em;
}
</style>
<body>

<p>
<button onclick="myMove()">Click Me</button>
</p> 

<div id ="container">
-<div id ="animate"></div>
+<div id ="animate">{</div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
-      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
    }
  }
}
</script>

</body>
</html>

I also threw together a Codepen showcasing a more modern technique (CSS transitions).

2 Likes
6

Thank you for sharing that!

7

Thank you so much Lionel!
If I may ask, how or where did you read up on that? I tried googling but I wasn’t sure on how to word it

8

Accumulated knowledge from thousands of Google searches. :wink:

As for wording your searches, you really just need to get back to first principles:

  • What do you want to do? Animate the horizontal position
  • The horizontal position of what? An HTML element1
  • Which language are you using? JavaScript2

Meanwhile, you also need to be careful not to misuse words such as “object”, which has a specific meaning in programming. If you search something like animate object curly braces, you’ll get completely irrelevant results.3

Instead, search something like animate horizontal position html element js.

[1] Note that “a curly brace” is too specific. The principle of animating a curly brace is the same as animating anything else you could put in an HTML element.

[2] Or CSS for the 2nd example. As a general rule of thumb, relatively simple animations like this can be done with CSS alone. I did use a little JavaScript in that 2nd example, but only for triggering the animation. If you wanted to trigger it by hovering or something rather than on a timeout after page load, you could do that with no JavaScript at all, like this.

[3] To muddy the waters further, the object data type in JavaScript and many other languages uses curly braces for syntax. A JavaScript object looks something like this:

{
  username: 'Haudz',
  postCount: 4,
  friends: [
    'Alice',
    'Bob',
    'Carol'
  ]
}
1 Like
9

Thanks a lot Lionel :slight_smile: