Template:Appearing Text Effect: Difference between revisions

Content deleted Content added

Inline

Revision as of 15:21, April 1, 2025

Displays text that emerges from the background into view with optional fading and direction control.

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`	left, center, right Default center	String	optional
Screen Position	`position`	CSS like top: 10px; left: 50%; Default top: 0;	String	optional
Animation Speed	`speed`	no description Default 2s	String	optional
Delay Before Start	`delay`	no description Default 0s	String	optional
Repeat Count	`repeat`	no description Default 1	String	optional
Fade Out After Emerge	`fadeout`	yes or no Default no	String	optional
Use Descending Effect	`reverse`	yes to use a zoom-up instead of zoom-out Default no	String	optional

Page Template:Emerging Animation/styles.css has no content.

I appear and then fade.

@@ Line 1: / Line 1: @@
 <includeonly>
-<templatestyles src="Appearing Text Effect/styles.css" />
+<templatestyles src="Emerging Animation/styles.css" />
-<div class="appear-effect-wrapper appear-{{{align|center}}}" style="{{{position|top: 0;}}}">
+<div class="emerge-effect-wrapper emerge-{{{align|center}}}" style="{{{position|top: 0;}}}">
 <span
-    class="appear-effect {{#ifeq: {{{fadeout|yes}}}|yes|fade-away}}"
+    class="emerge-effect {{#ifeq: {{{fadeout|no}}}|yes|emerge-fade}} {{#ifeq: {{{reverse|no}}}|yes|descend-motion}}"
     style="
       animation-duration: {{{speed|2s}}};
@@ Line 11: / Line 11: @@
       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;}}
     "
@@ Line 24: / Line 23: @@
       "label": "Text",
       "type": "string",
-      "default": "Insert Text Here",
+      "default": "Insert Text Here"
-      "description": "The content that appears"
     },
     "color": {
@@ Line 45: / Line 43: @@
       "label": "Glow Effect",
       "type": "string",
-      "default": "yes",
+      "default": "yes"
-      "description": "yes or no"
     },
     "glowcolor": {
@@ Line 63: / Line 60: @@
       "type": "string",
       "default": "top: 0;",
-      "description": "e.g. top: 10px; left: 100px;"
+      "description": "CSS like top: 10px; left: 50%;"
     },
     "speed": {
       "label": "Animation Speed",
       "type": "string",
-      "default": "2s",
+      "default": "2s"
-      "description": "How fast the appearance animation runs"
     },
     "delay": {
-      "label": "Delay",
+      "label": "Delay Before Start",
       "type": "string",
-      "default": "0s",
+      "default": "0s"
-      "description": "Time before animation starts"
     },
     "repeat": {
       "label": "Repeat Count",
       "type": "string",
-      "default": "1",
+      "default": "1"
-      "description": "e.g. 1, infinite"
     },
     "fadeout": {
-      "label": "Fade After Appear",
+      "label": "Fade Out After Emerge",
+      "type": "string",
+      "default": "no",
+      "description": "yes or no"
+    },
+    "reverse": {
+      "label": "Use Descending Effect",
       "type": "string",
       "default": "no",
-      "description": "yes to fade away after appearing"
+      "description": "yes to use a zoom-up instead of zoom-out"
     }
   },
-  "description": "Animates text to appear with optional delay, glow, fading, position, speed, and repeat.",
+  "description": "Displays text that emerges from the background into view with optional fading and direction control.",
   "format": "inline"
 }