Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
You must create an account or log in to edit.

Template:Appearing Text Effect: Difference between revisions

Template page
Content deleted Content added
No edit summary
Tags: Reverted 2017 source edit
No edit summary
Tags: Reverted 2017 source edit
Line 49: Line 49:
text-shadow:{{#ifeq:{{#var:glow}}|yes|0 0 6px {{#var:glowcolor}}, 0 0 10px {{#var:glowcolor}}|none}};
text-shadow:{{#ifeq:{{#var:glow}}|yes|0 0 6px {{#var:glowcolor}}, 0 0 10px {{#var:glowcolor}}|none}};
">{{{line3}}}</span>}}
">{{{line3}}}</span>}}



</span>
</span>
</includeonly>
</includeonly>

Revision as of 13:07, April 16, 2025


Fades multiple lines one-by-one without JavaScript. Use line1, line2, etc.

Template parameters[Edit template data]

This template prefers inline formatting of parameters.

ParameterDescriptionTypeStatus
Line 1line1

no description

Stringoptional
Line 2line2

no description

Stringoptional
Line 3line3

no description

Stringoptional
Text Colorcolor

no description

Default
#ffffff
Stringoptional
Font Familyfont

no description

Default
var(--font-family-citizen-serif)
Stringoptional
Font Sizefontsize

no description

Default
16px
Stringoptional
Glowglow

no description

Default
yes
Stringoptional
Glow Colorglowcolor

no description

Default
#ccc
Stringoptional
Alignmentalign

no description

Default
center
Stringoptional
Positionposition

no description

Default
top: 0;
Stringoptional
Animation Speedspeed

no description

Default
2s
Stringoptional
Repeat Countrepeat

no description

Default
1
Stringoptional
Fade Afterfadeout

no description

Default
no
Stringoptional
Fade Directionfadefrom

no description

Default
center
Stringoptional

{{#vardefine: speed | 1.5s }} {{#vardefine: font | var(--font-family-citizen-serif) }} {{#vardefine: size | 16px }} {{#vardefine: color | #00ffcc }} {{#vardefine: glow | yes }} {{#vardefine: glowcolor | #ccc }} {{#vardefine: fadeout | yes }} {{#vardefine: fadefrom | left }} {{#vardefine: repeat | 1 }}

The

<span class="appear-effect fade-{{#var:fadefrom}} " style="display:block; opacity:0; animation-delay:Expression error: Unrecognized punctuation character "{".s; animation-duration:{{#var:speed}}; animation-iteration-count:{{#var:repeat}}; font-family:{{#var:font}}; font-size:{{#var:size}}; color:{{#var:color}}; text-shadow:none; ">Then

<span class="appear-effect fade-{{#var:fadefrom}} " style="display:block; opacity:0; animation-delay:Expression error: Unrecognized punctuation character "{".s; animation-duration:{{#var:speed}}; animation-iteration-count:{{#var:repeat}}; font-family:{{#var:font}}; font-size:{{#var:size}}; color:{{#var:color}}; text-shadow:none; ">Final