Template:Appearing Text Effect: Difference between revisions

Content deleted Content added

Inline

Revision as of 15:41, April 18, 2025

Animates text to appear with optional delay, glow, fading, position, direction, speed, and repeat.

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Text	`text`	The content that appears Default Insert Text Here	String	optional
Text Color	`color`	no description Default #ffffff	String	optional
Font Family	`font`	no description Default var(--font-family-serif)	String	optional
Font Size	`fontsize`	no description Default 16px	String	optional
Glow Effect	`glow`	yes or no Default yes	String	optional
Glow Color	`glowcolor`	no description Default #ccc	String	optional
Text Alignment	`align`	left, center, right Default center	String	optional
Animation Speed	`speed`	How fast the appearance animation runs Default 2s	String	optional
Delay	`delay`	Time before animation starts Default 0s	String	optional
Repeat Count	`repeat`	e.g. 1, infinite Default 1	String	optional
Fade After Appear	`fadeout`	yes to fade away after appearing Default no	String	optional
Fade Direction	`fadefrom`	Direction of fade: center, left (left-to-right), or right (right-to-left) Default center	String	optional

Wow

Oh mama

Can you believe this shit?

@@ Line 1: / Line 1: @@
-<includeonly><templatestyles src="Appearing Text Effect/styles.css"/><div class="appear-effect-wrapper appear-{{{align|center}}} {{#switch: {{{position|center}}}
+<includeonly><templatestyles src="Appearing Text Effect/styles.css"/><div class="
+appear-effect-wrapper
-      | left = position-left
+appear-{{{align|center}}}
-      | right = position-right
-      | center = position-center
+position-{{{position|center}}}
-    }}"><div
+"><div class="
-  class="appear-effect
+appear-effect
-    {{#ifeq: {{{fadeout|yes}}}|yes|fade-away}}
+{{yesno|{{yesno-yes|{{{fadeout|}}}}}|yes=fade-away}}
-    {{#switch: {{{fadefrom|center}}}
+{{#switch: {{{fadefrom|center}}}|left=fade-ltr|right=fade-rtl|center=fade-center}}
+"
-      | left = fade-ltr
+style="
-      | right = fade-rtl
+animation-duration: {{{speed|2s}}};
-      | center = fade-center
+animation-delay: {{{delay|0s}}};
-    }}"
+animation-iteration-count: {{{repeat|1}}};
-  style="
+font-family: {{{font|var(--font-family-serif)}}};
-    animation-duration: {{{speed|2s}}};
-    animation-delay: {{{delay|0s}}};
+font-size: {{{fontsize|16px}}};
+color: {{{color|#ffffff}}};
-    animation-iteration-count: {{{repeat|1}}};
+opacity: 0;
-    font-family: {{{font|var(--font-family-serif)}}};
+{{#ifeq: {{{glow|yes}}}|yes|text-shadow: 0 0 6px {{{glowcolor|white}}}, 0 0 10px {{{glowcolor|#ccc}}};|text-shadow: none;}}
-    font-size: {{{fontsize|16px}}};
+">{{{text|Insert Text Here}}}</div></div></includeonly><noinclude>
-    color: {{{color|#ffffff}}};
-    opacity: 0;
-    {{#ifeq: {{{glow|yes}}}|yes|text-shadow: 0 0 6px {{{glowcolor|white}}}, 0 0 10px {{{glowcolor|#ccc}}};|text-shadow: none;}}
-  "
->{{{text|Insert Text Here}}}</div></div></includeonly><noinclude>
 <templatedata>
 {