Template:Appearing Text Effect: Difference between revisions

Content deleted Content added

Inline

Revision as of 07:17, April 16, 2025

Animates text to appear with optional delay, glow, directional fade, fading out, per-letter animation, and repeat control.

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-citizen-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
Screen Position	`position`	e.g. top: 10px; left: 100px; Default top: 0;	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
Per-letter Animation	`lettereffect`	yes to animate each letter individually Default no	String	optional
Letter Delay	`letterdelay`	Time in seconds between letters appearing (only if per-letter enabled) Default 0.05	String	optional

Expression error: Unrecognized word "yes".

| Magic In Motion }}

@@ Line 4: / Line 4: @@
 <!-- Per-letter effect -->
-{{yesno|{{yesno-no|{{{lettereffect}}}}}|yes=aaaa}}
+{{#ifexpr: {{{lettereffect|no}}} = yes
-<span class="appear-effect letter-effect
+| <span class="appear-effect letter-effect
     {{#ifeq: {{{fadeout|no}}}|yes|fade-away}}
     {{#switch: {{{fadefrom|center}}}
@@ Line 12: / Line 12: @@
       | center = fade-center }}">
     {{#invoke:String|split
-      |{{{text|Insert Text Here}}}
+      | {{{text|Insert Text Here}}}
-      ||<span style="animation-delay:{{#expr:@index*{{{letterdelay|0.05}}}}}s;">@item</span>
+      ||<span style="animation-delay: {{#expr:@index * {{{letterdelay|0.05}}} round 2}}s;">@item</span>
     }}
   </span>
+| <!-- Normal animation fallback -->
+  <span class="appear-effect
+    {{#ifeq: {{{fadeout|no}}}|yes|fade-away}}
+    {{#switch: {{{fadefrom|center}}}
+      | left = fade-ltr
+      | right = fade-rtl
+      | center = fade-center }}"
+    style="
+      animation-duration: {{{speed|2s}}};
+      animation-delay: {{{delay|0s}}};
+      animation-iteration-count: {{{repeat|1}}};
+      font-family: {{{font|var(--font-family-citizen-serif)}}};
+      font-size: {{{fontsize|16px}}};
+      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}}}</span>
+}}
+| <!-- Normal animation fallback -->
+<span class="appear-effect
+    {{#ifeq: {{{fadeout|no}}}|yes|fade-away}}
+    {{#switch: {{{fadefrom|center}}}
+      | left = fade-ltr
+      | right = fade-rtl
+      | center = fade-center }}"
+    style="
+      animation-duration: {{{speed|2s}}};
+      animation-delay: {{{delay|0s}}};
+      animation-iteration-count: {{{repeat|1}}};
+      font-family: {{{font|var(--font-family-citizen-serif)}}};
+      font-size: {{{fontsize|16px}}};
+      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}}}</span>
+}}
 |
 <!-- Normal animation -->
-  <span class="appear-effect
+<span class="appear-effect
     {{#ifeq: {{{fadeout|no}}}|yes|fade-away}}
     {{#switch: {{{fadefrom|center}}}
@@ Line 134: / Line 172: @@
 }
 </templatedata>
+{{Appearing Text Effect
-{{Appearing Text Effect|lettereffect=yes|fadefrom=left|delay=2s|text=In short: Amaranth Legacy is a community of worldbuilders, writers, and storytellers, all brought together to share writings, artwork, and ideas. We have a decade-long history, with 56 users and 3,255 pages on this website.|repeat=infinite|speed=7s}}
+ | text = Magic In Motion
+ | lettereffect = yes
+ | letterdelay = 0.1
+ | fadeout = yes
+ | fadefrom = center
+ | color = gold
+ | fontsize = 24px
+}}
 </noinclude>