Template:Appearing Text Effect: Difference between revisions

Content deleted Content added

Inline

Revision as of 13:06, April 16, 2025

Fades multiple lines one-by-one without JavaScript. Use line1, line2, etc.

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Line 1	`line1`	no description	String	optional
Line 2	`line2`	no description	String	optional
Line 3	`line3`	no description	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	`glow`	no description Default yes	String	optional
Glow Color	`glowcolor`	no description Default #ccc	String	optional
Alignment	`align`	no description Default center	String	optional
Position	`position`	no description Default top: 0;	String	optional
Animation Speed	`speed`	no description Default 2s	String	optional
Repeat Count	`repeat`	no description Default 1	String	optional
Fade After	`fadeout`	no description Default no	String	optional
Fade Direction	`fadefrom`	no description Default center	String	optional

{{#vardefine: speed | 1.5s }} {{#vardefine: font | var(--font-family-citizen-serif) }} {{#vardefine: size | 16px }} {{#vardefine: color | #00ffcc }} {{#vardefine: glow | yes }} {{#vardefine: glowcolor | #ccc }} {{#vardefine: fadeout | yes }} {{#vardefine: fadefrom | left }} {{#vardefine: repeat | 1 }}

The

<span class="appear-effect fade-{{#var:fadefrom}} " style="display:block; opacity:0; animation-delay:Expression error: Unrecognized punctuation character "{".s; animation-duration:{{#var:speed}}; animation-iteration-count:{{#var:repeat}}; font-family:{{#var:font}}; font-size:{{#var:size}}; color:{{#var:color}}; text-shadow:none; ">Then

<span class="appear-effect fade-{{#var:fadefrom}} " style="display:block; opacity:0; animation-delay:Expression error: Unrecognized punctuation character "{".s; animation-duration:{{#var:speed}}; animation-iteration-count:{{#var:repeat}}; font-family:{{#var:font}}; font-size:{{#var:size}}; color:{{#var:color}}; text-shadow:none; ">Final

@@ Line 2: / Line 2: @@
 <templatestyles src="Appearing Text Effect/styles.css" />
 <span class="appear-effect-wrapper appear-{{{align|center}}}" style="{{{position|top: 0;}}}">
-<span
+{{#vardefine: speed | {{{speed|2s}}} }}
-  class="appear-effect
+{{#vardefine: font | {{{font|var(--font-family-citizen-serif)}}} }}
-    {{#ifeq: {{{fadeout|yes}}}|yes|fade-away}}
-    {{#switch: {{{fadefrom|center}}}
+{{#vardefine: size | {{{fontsize|16px}}} }}
+{{#vardefine: color | {{{color|#ffffff}}} }}
-      | left = fade-ltr
+{{#vardefine: glow | {{{glow|yes}}} }}
-      | right = fade-rtl
+{{#vardefine: glowcolor | {{{glowcolor|#ccc}}} }}
-      | center = fade-center
+{{#vardefine: fadeout | {{{fadeout|no}}} }}
-    }}"
+{{#vardefine: fadefrom | {{{fadefrom|center}}} }}
-  style="
+{{#vardefine: repeat | {{{repeat|1}}} }}
-    animation-duration: {{{speed|2s}}};
-    animation-delay: {{{delay|0s}}};
+<!-- Create spans for each line -->
-    animation-iteration-count: {{{repeat|1}}};
+{{#if:{{{line1|}}}|<span class="appear-effect fade-{{#var:fadefrom}} {{#ifeq:{{#var:fadeout}}|yes|fade-away}}"
-    font-family: {{{font|var(--font-family-citizen-serif)}}};
+style="display:block;
-    font-size: {{{fontsize|16px}}};
+opacity:0;
-    color: {{{color|#ffffff}}};
+animation-delay:0s;
-    opacity: 0;
+animation-duration:{{#var:speed}};
-    {{#ifeq: {{{glow|yes}}}|yes|text-shadow: 0 0 6px {{{glowcolor|white}}}, 0 0 10px {{{glowcolor|#ccc}}};|text-shadow: none;}}
+animation-iteration-count:{{#var:repeat}};
-  "
+font-family:{{#var:font}};
->{{{text|Insert Text Here}}}</span>
+font-size:{{#var:size}};
+color:{{#var:color}};
+text-shadow:{{#ifeq:{{#var:glow}}|yes|0 0 6px {{#var:glowcolor}}, 0 0 10px {{#var:glowcolor}}|none}};
+">{{{line1}}}</span>}}
+{{#if:{{{line2|}}}|<span class="appear-effect fade-{{#var:fadefrom}} {{#ifeq:{{#var:fadeout}}|yes|fade-away}}"
+style="display:block;
+opacity:0;
+animation-delay:{{#expr:1 * {{#explode:{{#var:speed}}|s|0}}}}s;
+animation-duration:{{#var:speed}};
+animation-iteration-count:{{#var:repeat}};
+font-family:{{#var:font}};
+font-size:{{#var:size}};
+color:{{#var:color}};
+text-shadow:{{#ifeq:{{#var:glow}}|yes|0 0 6px {{#var:glowcolor}}, 0 0 10px {{#var:glowcolor}}|none}};
+">{{{line2}}}</span>}}
+{{#if:{{{line3|}}}|<span class="appear-effect fade-{{#var:fadefrom}} {{#ifeq:{{#var:fadeout}}|yes|fade-away}}"
+style="display:block;
+opacity:0;
+animation-delay:{{#expr:2 * {{#explode:{{#var:speed}}|s|0}}}}s;
+animation-duration:{{#var:speed}};
+animation-iteration-count:{{#var:repeat}};
+font-family:{{#var:font}};
+font-size:{{#var:size}};
+color:{{#var:color}};
+text-shadow:{{#ifeq:{{#var:glow}}|yes|0 0 6px {{#var:glowcolor}}, 0 0 10px {{#var:glowcolor}}|none}};
+">{{{line3}}}</span>}}
 </span>
 </includeonly>
@@ Line 28: / Line 59: @@
 {
   "params": {
+    "line1": { "label": "Line 1", "type": "string" },
-    "text": {
-      "label": "Text",
+    "line2": { "label": "Line 2", "type": "string" },
-      "type": "string",
+    "line3": { "label": "Line 3", "type": "string" },
-      "default": "Insert Text Here",
+    "color": { "label": "Text Color", "type": "string", "default": "#ffffff" },
+    "font": { "label": "Font Family", "type": "string", "default": "var(--font-family-citizen-serif)" },
-      "description": "The content that appears"
+    "fontsize": { "label": "Font Size", "type": "string", "default": "16px" },
-    },
+    "glow": { "label": "Glow", "type": "string", "default": "yes" },
-    "color": {
-      "label": "Text Color",
+    "glowcolor": { "label": "Glow Color", "type": "string", "default": "#ccc" },
-      "type": "string",
+    "align": { "label": "Alignment", "type": "string", "default": "center" },
-      "default": "#ffffff"
+    "position": { "label": "Position", "type": "string", "default": "top: 0;" },
+    "speed": { "label": "Animation Speed", "type": "string", "default": "2s" },
-    },
+    "repeat": { "label": "Repeat Count", "type": "string", "default": "1" },
-    "font": {
-      "label": "Font Family",
+    "fadeout": { "label": "Fade After", "type": "string", "default": "no" },
-      "type": "string",
+    "fadefrom": { "label": "Fade Direction", "type": "string", "default": "center" }
-      "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"
-    },
-    "fadefrom": {
-      "label": "Fade Direction",
-      "type": "string",
-      "default": "center",
-      "description": "Direction of fade: center, left (left-to-right), or right (right-to-left)"
-    }
   },
-  "description": "Animates text to appear with optional delay, glow, fading, position, direction, speed, and repeat.",
+  "description": "Fades multiple lines one-by-one without JavaScript. Use line1, line2, etc.",
   "format": "inline"
 }
 </templatedata>
-{{Appearing Text Effect|align=left|text=Wow|fadeout=yes|fadefrom=left|repeat=infinite|speed=6s}}
+{{Appearing Text Effect
+ | line1=The
-{{Appearing Text Effect|fadefrom=right|text=Oh mama|speed=6s|fadeout=yes|repeat=infinite|align=right}}
+ | line2=Then
-{{Appearing Text Effect|repeat=infinite|fadeout=yes|text=Can you believe this shit?|speed=6s}}
+ | line3=Final
+ | speed=1.5s
+ | fadefrom=left
+ | fadeout=yes
+ | glow=yes
+ | color=#00ffcc
+}}
 </noinclude>