Question

Although we can achieve fantastic animations through various Javascript libraries such as jQuery. I am wondering what’s the technique behind the animation?

I can think of using CSS to format the page element.

But how can we place an element on arbitrary position of the page? I mean, not by lines. Is it true that we can think of the client area within the browser window as the Paint canvas?

I am totally new to frontend Web development, I hope I made myself clear. And thank you for answering this junior question.

Answer 1

The jQuery way – and the only cross-browser way – to animate is to set some CSS properties, wait a little, update those properties, wait a little, update those properties…

e.style.position = "absolute";
time_start = Date.now();
time_end = time_start + 10000;

(function tick(){
  now = Date.now() - time_start;
  if(now > time_end) now = time_end;
  e.style.top = now * speed + top_start;
  if(now < time_end) setTimeout(tick, 13);
}();

The CSS properties you are interested in are:

• position: absolute lets you position the element to an arbitrary location.
• display: block or display: inline-block lets an element to have a width and height
• top, left, bottom, right define the element position if its position is absolute or relative. left takes precedence over right and top takes precedence over bottom.
• width and height define the element’s size.

• opacity can be animated to fade an element in or out.

• padding, border-width, margin and their respective components can all be animated.

You can also animate colors: border-color, color, background.