Geek asks and answers

Resize Wikipedia Animations

If you go to the Wikipedia page in the Chrome window and ctrl + scrollup or ctrl + scrolldown, the size will be done in the animation.

How is this achieved?

(In FF only

  Read
  View source
  View history

in the upper right corner of the animation)

+5
source share
2 answers

If you learn CSS using the Chrome Inspector, you will find this rule:

body.vector-animateLayout div#content, body.vector-animateLayout div#footer {
  transition: margin-left 250ms,padding 250ms;
  -moz-transition: margin-left 250ms,padding 250ms;
  -webkit-transition: margin-left 250ms,padding 250ms;
  -o-transition: margin-left 250ms,padding 250ms;
}

This smoothly animates the properties margin-leftand paddingwhich Webkit seems to change when scaling and exiting. Firefox should also animate, but it is not.

+6
source

, , . vector-animate . load.js( ) , , ( ). FF IE. JS : //bits.wikimedia.org/de.wikipedia.org/load.php?debug=false&lang=de&modules=site&only=scripts&skin=vector&*

, CSS, :

body.vector-animateLayout div#content, body.vector-animateLayout div#footer {
transition: margin-left 250ms,padding 250ms;
-moz-transition: margin-left 250ms,padding 250ms;
-webkit-transition: margin-left 250ms,padding 250ms;
-o-transition: margin-left 250ms,padding 250ms;
}

Webkit. . , transitions CSS3 .

, .

0
source

More articles:


All Articles