Template:Appearing Text Effect: Difference between revisions

Content deleted Content added

Inline

Revision as of 07:18, April 16, 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-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

Wow

Oh mama

Can you believe this shit?

@@ Line 2: / Line 2: @@
 <templatestyles src="Appearing Text Effect/styles.css" />
 <span class="appear-effect-wrapper appear-{{{align|center}}}" style="{{{position|top: 0;}}}">
+<span
-<!-- Per-letter effect -->
+  class="appear-effect
-{{#ifexpr: {{{lettereffect|no}}} = yes
+    {{#ifeq: {{{fadeout|yes}}}|yes|fade-away}}
-| <span class="appear-effect letter-effect
-    {{#ifeq: {{{fadeout|no}}}|yes|fade-away}}
     {{#switch: {{{fadefrom|center}}}
       | left = fade-ltr
       | right = fade-rtl
-      | center = fade-center }}">
+      | center = fade-center
+    }}"
-    {{#invoke:String|split
+  style="
-      | {{{text|Insert Text Here}}}
-      ||<span style="animation-delay: {{#expr:@index * {{{letterdelay|0.05}}} round 2}}s;">@item</span>
+    animation-duration: {{{speed|2s}}};
+    animation-delay: {{{delay|0s}}};
-    }}
+    animation-iteration-count: {{{repeat|1}}};
-  </span>
+    font-family: {{{font|var(--font-family-citizen-serif)}}};
-| <!-- Normal animation fallback -->
+    font-size: {{{fontsize|16px}}};
-  <span class="appear-effect
-    {{#ifeq: {{{fadeout|no}}}|yes|fade-away}}
+    color: {{{color|#ffffff}}};
+    opacity: 0;
-    {{#switch: {{{fadefrom|center}}}
+    {{#ifeq: {{{glow|yes}}}|yes|text-shadow: 0 0 6px {{{glowcolor|white}}}, 0 0 10px {{{glowcolor|#ccc}}};|text-shadow: none;}}
-      | left = fade-ltr
+  "
-      | right = fade-rtl
+>{{{text|Insert Text Here}}}</span>
-      | 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
-    {{#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>
-}}
 </span>
 </includeonly>
@@ Line 154: / Line 101: @@
       "default": "center",
       "description": "Direction of fade: center, left (left-to-right), or right (right-to-left)"
-    },
-    "lettereffect": {
-      "label": "Per-letter Animation",
-      "type": "string",
-      "default": "no",
-      "description": "yes to animate each letter individually"
-    },
-    "letterdelay": {
-      "label": "Letter Delay",
-      "type": "string",
-      "default": "0.05",
-      "description": "Time in seconds between letters appearing (only if per-letter enabled)"
     }
   },
-  "description": "Animates text to appear with optional delay, glow, directional fade, fading out, per-letter animation, and repeat control.",
+  "description": "Animates text to appear with optional delay, glow, fading, position, direction, speed, and repeat.",
   "format": "inline"
 }
 </templatedata>
-{{Appearing Text Effect
+{{Appearing Text Effect|align=left|text=Wow|fadeout=yes|fadefrom=left|repeat=infinite|speed=6s}}
+{{Appearing Text Effect|fadefrom=right|text=Oh mama|speed=6s|fadeout=yes|repeat=infinite|align=right}}
- | text = Magic In Motion
+{{Appearing Text Effect|repeat=infinite|fadeout=yes|text=Can you believe this shit?|speed=6s}}
- | lettereffect = yes
- | letterdelay = 0.1
- | fadeout = yes
- | fadefrom = center
- | color = gold
- | fontsize = 24px
-}}
 </noinclude>