Template:Appearing Text Effect: Difference between revisions

Content deleted Content added

Inline

Revision as of 15:11, April 1, 2025

Animates text to appear with optional delay, glow, fading, position, 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

I appear and then fade.

@@ Line 3: / Line 3: @@
 <div class="appear-effect-wrapper appear-{{{align|center}}}" style="{{{position|top: 0;}}}">
 <span
-    class="appear-effect"
+    class="appear-effect {{#ifeq: {{{fadeout|yes}}}|yes|fade-away}}"
     style="
       animation-duration: {{{speed|2s}}};
@@ Line 21: / Line 21: @@
 {
   "params": {
+    "text": {
-    "text": { "label": "Text", "type": "string", "default": "Insert Text Here" },
-    "color": { "label": "Text Color", "type": "string", "default": "#ffffff" },
+      "label": "Text",
-    "font": { "label": "Font Family", "type": "string", "default": "var(--font-family-citizen-serif)" },
+      "type": "string",
+      "default": "Insert Text Here",
-    "fontsize": { "label": "Font Size", "type": "string", "default": "16px" },
+      "description": "The content that appears"
-    "glow": { "label": "Glow Effect", "type": "string", "default": "yes" },
+    },
-    "glowcolor": { "label": "Glow Color", "type": "string", "default": "#ccc" },
+    "color": {
-    "align": { "label": "Text Alignment", "type": "string", "default": "center" },
-    "position": { "label": "Position on Screen", "type": "string", "default": "top: 0;" },
+      "label": "Text Color",
-    "speed": { "label": "Fade Speed", "type": "string", "default": "2s" },
+      "type": "string",
-    "delay": { "label": "Delay Before Appearing", "type": "string", "default": "0s" },
+      "default": "#ffffff"
+    },
-    "repeat": { "label": "Repeat Count", "type": "string", "default": "1" }
+    "font": {
+      "label": "Font Family",
+      "type": "string",
+      "default": "var(--font-family-citizen-serif)"
+    },
+    "fontsize": {
+      "label": "Font Size",
+      "type": "string",
+      "default": "16px"
+    },
+    "glow": {
+      "label": "Glow Effect",
+      "type": "string",
+      "default": "yes",
+      "description": "yes or no"
+    },
+    "glowcolor": {
+      "label": "Glow Color",
+      "type": "string",
+      "default": "#ccc"
+    },
+    "align": {
+      "label": "Text Alignment",
+      "type": "string",
+      "default": "center",
+      "description": "left, center, right"
+    },
+    "position": {
+      "label": "Screen Position",
+      "type": "string",
+      "default": "top: 0;",
+      "description": "e.g. top: 10px; left: 100px;"
+    },
+    "speed": {
+      "label": "Animation Speed",
+      "type": "string",
+      "default": "2s",
+      "description": "How fast the appearance animation runs"
+    },
+    "delay": {
+      "label": "Delay",
+      "type": "string",
+      "default": "0s",
+      "description": "Time before animation starts"
+    },
+    "repeat": {
+      "label": "Repeat Count",
+      "type": "string",
+      "default": "1",
+      "description": "e.g. 1, infinite"
+    },
+    "fadeout": {
+      "label": "Fade After Appear",
+      "type": "string",
+      "default": "no",
+      "description": "yes to fade away after appearing"
+    }
   },
-  "description": "Makes text appear on screen with delay, alignment, styling, and optional glow.",
+  "description": "Animates text to appear with optional delay, glow, fading, position, speed, and repeat.",
   "format": "inline"
 }
 </templatedata>
-{{Appearing Text Effect|text=Are you seeing this?|delay=1s|repeat=infinite}}
+{{Appearing Text Effect
+ | text=I appear and then fade.
+ | speed=2s
+ | delay=1s
+ | fadeout=yes
+ | repeat=infinite
+ | font=Cinzel
+ | fontsize=20px
+ | color=#ffcc00
+ | glow=yes
+ | glowcolor=#ffee88
+}}
 </noinclude>