Template:Appearing Text Effect: Difference between revisions

Content deleted Content added

Inline

Revision as of 04:11, April 2, 2025

Makes text appear on screen with delay, alignment, styling, and optional glow.

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Text	`text`	no description 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`	no description Default yes	String	optional
Glow Color	`glowcolor`	no description Default #ccc	String	optional
Text Alignment	`align`	no description Default center	String	optional
Position on Screen	`position`	no description Default top: 0;	String	optional
Fade Speed	`speed`	no description Default 2s	String	optional
Delay Before Appearing	`delay`	no description Default 0s	String	optional
Repeat Count	`repeat`	no description Default 1	String	optional

Ahhhhhhh

@@ 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}} {{#ifeq: {{{style|descending}}}|descending-effect|emerging-effect}}"
     style="
       animation-duration: {{{speed|2s}}};
@@ Line 12: / Line 12: @@
       color: {{{color|#ffffff}}};
       opacity: 0;
-      {{#ifeq: {{{glow|yes}}}|yes|text-shadow: 0 0 6px {{{glowcolor|white}}}, 0 0 10px {{{glowcolor|#ccc}}};|text-shadow: none;}}
+      {{#ifeq: {{{glow|yes}}} | yes | text-shadow: 0 0 6px {{{glowcolor|white}}}, 0 0 10px {{{glowcolor|#ccc}}}; | text-shadow: none;}}
     "
   >{{{text|Insert Text Here}}}</span>
 </div>
 </includeonly>
 <noinclude>
 <templatedata>
@@ Line 29: / Line 28: @@
     "glowcolor": { "label": "Glow Color", "type": "string", "default": "#ccc" },
     "align": { "label": "Text Alignment", "type": "string", "default": "center" },
-    "position": { "label": "Screen Position", "type": "string", "default": "top: 0;" },
+    "position": { "label": "Position on Screen", "type": "string", "default": "top: 0;" },
-    "speed": { "label": "Animation Speed", "type": "string", "default": "2s" },
+    "speed": { "label": "Fade Speed", "type": "string", "default": "2s" },
-    "delay": { "label": "Delay", "type": "string", "default": "0s" },
+    "delay": { "label": "Delay Before Appearing", "type": "string", "default": "0s" },
-    "repeat": { "label": "Repeat Count", "type": "string", "default": "1" },
+    "repeat": { "label": "Repeat Count", "type": "string", "default": "1" }
-    "fadeout": { "label": "Fade Out After", "type": "string", "default": "no" },
-    "style": {
-      "label": "Animation Style",
-      "type": "string",
-      "default": "emerging",
-      "description": "emerging (from deep to near) or descending (from top to middle)"
-    }
   },
-  "description": "Creates a customizable appearing text effect that can emerge or descend with optional glow and fading.",
+  "description": "Makes text appear on screen with delay, alignment, styling, and optional glow.",
   "format": "inline"
 }
 </templatedata>
+{{Appearing Text Effect|text=Ahhhhhhh|fadeout=yes|repeat=infinite}}
-</noinclude>
-<noinclude>
-<templatedata>
-{
-  "params": {
-    "text": {
-      "label": "Text",
-      "type": "string",
-      "default": "Insert Text Here",
-      "description": "The content that appears"
-    },
-    "color": {
-      "label": "Text Color",
-      "type": "string",
-      "default": "#ffffff"
-    },
-    "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": "Animates text to appear with optional delay, glow, fading, position, speed, and repeat.",
-  "format": "inline"
-}
-</templatedata>
-{{Appearing Text Effect
- | text=I appear and then fade.
- | speed=7s
- | delay=1s
- | fadeout=yes
- | repeat=infinite
- | font=Cinzel
- | fontsize=20px
- | color=#ffcc00
- | glow=yes
- | glowcolor=#ffee88
-}}
-{{Appearing Text Effect
- |text=I appear another way
- |style=emerging
- |position=top: 10px; left: 30%;
- |speed=7s
- |delay=2s
- |repeat=infinite
- |fadeout=yes
- |fontsize=20px
- |color=#ff4444
- |font=Cinzel
- |glow=yes
- |glowcolor=#ff8888
- |align=right
-}}
 </noinclude>