Template:Appearing Text Effect: Difference between revisions

Content deleted Content added

Inline

Latest revision as of 04:09, September 18, 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-serif)	String	optional
Font Size	`fontsize`	no description Default 16px	String	optional
Glow Effect	`glow`	no description Default true	Boolean	optional
Glow Color	`glowcolor`	no description Default #ccc	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`	no description Default 1 Example infinite	String	optional
Fade After Appear	`fadeout`	To fade away after appearing Default false	Boolean	optional
Fade Direction	`fadefrom`	Direction of fade: center, left (left-to-right), or right (right-to-left) Default center	String	optional
Position	`position`	no description Default center	String	optional

Wow

Oh mama

Can you believe this shit?

@@ Line 1: / Line 1: @@
+<includeonly><templatestyles src="Appearing Text Effect/styles.css"/><div class="appear-effect {{yesno|{{yesno-no|{{{fadeout|}}}}}|yes=fade-away}} fade-{{{fadefrom|center}}} position-{{{position|{{{align|center}}}}}}" style="
-<includeonly>
+  animation-duration: {{{speed|2s}}};
-<templatestyles src="Appearing Text Effect/styles.css" />
+  animation-delay: {{{delay|0s}}};
-<span class="appear-effect-wrapper appear-{{{align|center}}}" style="{{{position|top: 0;}}}">
+  animation-iteration-count: {{{repeat|1}}};
+  font-family: {{{font|var(--font-family-serif)}}};
-{{#vardefine: speed | {{{speed|2s}}} }}
+  font-size: {{{fontsize|16px}}};
-{{#vardefine: font | {{{font|var(--font-family-citizen-serif)}}} }}
+  color: {{{color|#ffffff}}};
-{{#vardefine: size | {{{fontsize|16px}}} }}
+  {{yesno|{{yesno-yes|{{{glow|}}}}}|yes=text-shadow: 0 0 6px {{{glowcolor|white}}}, 0 0 10px {{{glowcolor|#ccc}}};|text-shadow: none;}}
-{{#vardefine: color | {{{color|#ffffff}}} }}
+">{{{text|Insert Text Here}}}</div></includeonly><noinclude>
-{{#vardefine: glow | {{{glow|yes}}} }}
-{{#vardefine: glowcolor | {{{glowcolor|#ccc}}} }}
-{{#vardefine: fadeout | {{{fadeout|no}}} }}
-{{#vardefine: fadefrom | {{{fadefrom|center}}} }}
-{{#vardefine: repeat | {{{repeat|1}}} }}
-<!-- Create spans for each line -->
-{{#if:{{{line1|}}}|<span class="appear-effect fade-{{#var:fadefrom}} {{#ifeq:{{#var:fadeout}}|yes|fade-away}}"
-style="display:block;
-opacity:0;
-animation-delay:0s;
-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}};
-">{{{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>
-<noinclude>
 <templatedata>
 {
-  "params": {
+	"params": {
+		"text": {
-    "line1": { "label": "Line 1", "type": "string" },
-    "line2": { "label": "Line 2", "type": "string" },
+			"label": "Text",
-    "line3": { "label": "Line 3", "type": "string" },
+			"type": "string",
+			"default": "Insert Text Here",
-    "color": { "label": "Text Color", "type": "string", "default": "#ffffff" },
+			"description": "The content that appears"
-    "font": { "label": "Font Family", "type": "string", "default": "var(--font-family-citizen-serif)" },
+		},
-    "fontsize": { "label": "Font Size", "type": "string", "default": "16px" },
+		"color": {
-    "glow": { "label": "Glow", "type": "string", "default": "yes" },
-    "glowcolor": { "label": "Glow Color", "type": "string", "default": "#ccc" },
+			"label": "Text Color",
-    "align": { "label": "Alignment", "type": "string", "default": "center" },
+			"type": "string",
+			"default": "#ffffff"
-    "position": { "label": "Position", "type": "string", "default": "top: 0;" },
+		},
-    "speed": { "label": "Animation Speed", "type": "string", "default": "2s" },
+		"font": {
-    "repeat": { "label": "Repeat Count", "type": "string", "default": "1" },
+			"label": "Font Family",
-    "fadeout": { "label": "Fade After", "type": "string", "default": "no" },
-    "fadefrom": { "label": "Fade Direction", "type": "string", "default": "center" }
+			"type": "string",
+			"default": "var(--font-family-serif)"
-  },
+		},
-  "description": "Fades multiple lines one-by-one without JavaScript. Use line1, line2, etc.",
+		"fontsize": {
-  "format": "inline"
+			"label": "Font Size",
+			"type": "string",
+			"default": "16px"
+		},
+		"glow": {
+			"label": "Glow Effect",
+			"type": "boolean",
+			"default": "true"
+		},
+		"glowcolor": {
+			"label": "Glow Color",
+			"type": "string",
+			"default": "#ccc"
+		},
+		"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",
+			"example": "infinite"
+		},
+		"fadeout": {
+			"label": "Fade After Appear",
+			"type": "boolean",
+			"default": "false",
+			"description": "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)"
+		},
+		"position": {
+			"label": "Position",
+			"type": "string",
+			"default": "center"
+		}
+	},
+	"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}}
- | 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>