CODEWITHSUNDEEP
javascriptjqueryhtmlcssweb-applications
smwikipedia
smwikipedia

Reputation: 64453

What's the technique behind animation on a web page?

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.

Upvotes: 0

Views: 162

Answers (1)

John Dvorak
John Dvorak

Reputation: 27317

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.

Upvotes: 3

Related Questions