(Adding new example and modifying one) |
(New section: →Customizing the animation) |
||
Line 19: | Line 19: | ||
}} |
}} |
||
− | == {{{ |
+ | == {{{basic|Basic usage}}} == |
− | {{{ |
+ | {{{basicInfo| |
The general form for defining animation on an element would be |
The general form for defining animation on an element would be |
||
<syntaxhighlight lang="html5"> |
<syntaxhighlight lang="html5"> |
||
Line 101: | Line 101: | ||
{{!}} <pre style="white-space:pre-line;"><div class="ua-animation ua-toandback" style="transform:scale(1.5) rotate(180deg); left:-200px; top:-200px;">[[File:Ball.png|100px]]</div></pre> |
{{!}} <pre style="white-space:pre-line;"><div class="ua-animation ua-toandback" style="transform:scale(1.5) rotate(180deg); left:-200px; top:-200px;">[[File:Ball.png|100px]]</div></pre> |
||
{{!}} class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" {{!}} <div class="ua-animation ua-toandback" style="transform:scale(1.5) rotate(180deg); left:-200px; top:-200px;">[[File:Ball.png|100px]]</div> |
{{!}} class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" {{!}} <div class="ua-animation ua-toandback" style="transform:scale(1.5) rotate(180deg); left:-200px; top:-200px;">[[File:Ball.png|100px]]</div> |
||
+ | <!-- |
||
+ | |||
+ | --> |
||
+ | {{!}}} |
||
+ | }}} |
||
+ | |||
+ | == {{{custom|Customizing the animation}}} == |
||
+ | {{{customInfo| |
||
+ | By default, the animations play repeatedly an unlimited number of times, with each round taking 3 seconds. Some play back and forth while others just start again. Those defaults can be overriden by setting some properties in the '''style="..."''' section of the element. |
||
+ | |||
+ | The most common thing to customize it the duration of the animation - which naturally affects how fast it plays. |
||
+ | {{{!}} class="article-table" |
||
+ | <!-- |
||
+ | |||
+ | --> |
||
+ | {{!}}- |
||
+ | ! colspan="2" {{!}} Fast jumping (1 second) |
||
+ | {{!}}- |
||
+ | {{!}} {{#tag:pre|<nowiki><div class="ua-animation ua-up" </nowiki>'''style="animation-duration:1s;"'''<nowiki>>[[File:Ball.png|100px]]</div></nowiki>|style="white-space:pre-line;"}} |
||
+ | {{!}} class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" {{!}} <div class="ua-animation ua-up" style="animation-duration:1s;">[[File:Ball.png|100px]]</div> |
||
+ | <!-- |
||
+ | |||
+ | --> |
||
+ | {{!}}- |
||
+ | ! colspan="2" {{!}} Default rate (3 seconds) |
||
+ | {{!}}- |
||
+ | {{!}} {{#tag:pre|<nowiki><div class="ua-animation ua-up">[[File:Ball.png|100px]]</div></nowiki>|style="white-space:pre-line;"}} |
||
+ | {{!}} class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" {{!}} <div class="ua-animation ua-up">[[File:Ball.png|100px]]</div> |
||
+ | <!-- |
||
+ | |||
+ | --> |
||
+ | {{!}}- |
||
+ | ! colspan="2" {{!}} Slow jumping (5 seconds) |
||
+ | {{!}}- |
||
+ | {{!}} {{#tag:pre|<nowiki><div class="ua-animation ua-up" </nowiki>'''style="animation-duration:5s;"'''<nowiki>>[[File:Ball.png|100px]]</div></nowiki>|style="white-space:pre-line;"}} |
||
+ | {{!}} class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" {{!}} <div class="ua-animation ua-up" style="animation-duration:5s;">[[File:Ball.png|100px]]</div> |
||
<!-- |
<!-- |
||
Revision as of 22:00, 19 October 2021
This stylesheet defines a set of generic motion animations to be used on pages by just editing the page's source. While admins can access the wiki's CSS to define animations as they wish, normal users cannot. By importing this stylesheet, admins can allow normal users to add animation to elements.
These animations can be used on any page in a wiki, but they were made mainly with userpages in mind, for users who like to use code to decorate their pages.
Installation
Basic usage
The general form for defining animation on an element would be
<div class="ua-animation ua-SOME-ACTION"> SOME IMAGE OR TEXT </div>
where ua-SOME-ACTION
would be replaced with one of the defined actions, for example ua-spin
.
For animating one or few words inside a paragraph, <span>
tags can be used instead of <div>
Only the word <span class="ua-animation ua-SOME-ACTION">hello</span> would be animated.
List of available actions
ua-up
ua-down
ua-updown
ua-downup
ua-left
ua-right
ua-leftright
ua-rightleft
ua-swing
ua-spin-clockwise
(orua-spin
for short)ua-spin-counterclockwise
ua-grow
ua-shrink
ua-growshrink
ua-shrinkgrow
Examples
Here are a few examples. The demonstration won't work on mobile viewPreferences.
, or if you disabled DemoScripts on yourJumping | |
---|---|
<div class="ua-animation ua-up">[[File:Ball.png|100px]]</div> |
|
Moving left and right | |
<div class="ua-animation ua-leftright">[[File:Ball.png|100px]]</div> |
|
Swinging | |
Let's go with <span class="ua-animation ua-swing">words</span> this time. |
Let's go with words this time. |
Spinning | |
<div class="ua-animation ua-spin">[[File:Ball.png|100px]]</div> |
|
Shrink and grow | |
<div class="ua-animation ua-shrinkgrow">[[File:Ball.png|100px]]</div> |
|
"Free" animation of some properties - currently CSS transformations and relative positionning of top and left | |
<div class="ua-animation ua-toandback" style="transform:scale(1.5) rotate(180deg); left:-200px; top:-200px;">[[File:Ball.png|100px]]</div> |
Customizing the animation
By default, the animations play repeatedly an unlimited number of times, with each round taking 3 seconds. Some play back and forth while others just start again. Those defaults can be overriden by setting some properties in the style="..." section of the element.
The most common thing to customize it the duration of the animation - which naturally affects how fast it plays.
Fast jumping (1 second) | |
---|---|
<div class="ua-animation ua-up" '''style="animation-duration:1s;"'''>[[File:Ball.png|100px]]</div> |
|
Default rate (3 seconds) | |
<div class="ua-animation ua-up">[[File:Ball.png|100px]]</div> |
|
Slow jumping (5 seconds) | |
<div class="ua-animation ua-up" '''style="animation-duration:5s;"'''>[[File:Ball.png|100px]]</div> |
Changelog
- May 10, 2021
- First created