Template:Fading Text Effect: Difference between revisions

Content deleted Content added

Inline

Revision as of 09:37, March 30, 2025

Displays animated text that falls downward with style, glow, and animation options.

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Text	`text`	The content that falls down the screen Default Insert Text Here	String	optional
Color	`color`	no description Default #ffffff	String	optional
Font	`font`	no description Default serif	String	optional
Font Size	`fontsize`	no description Default 16px	String	optional
Text Alignment	`align`	no description Default center	String	optional
Glow	`glow`	no description Default yes	String	optional
Glow Color	`glowcolor`	no description Default #ccc	String	optional
Fall Speed	`speed`	Time the text takes to fall (e.g., 2s, 5s) Default 3s	String	optional
Landing Distance	`land`	How far down the screen the text falls Default 100vh	String	optional
Repeat Count	`repeat`	How many times the text repeats the fall Default 1	String	optional

Examples

I should be in the center (also I should be glowing)

I should be on the left (I also shouldn't be glowing)

I should be on the right (also I should be glowing)

@@ Line 1: / Line 1: @@
 <includeonly>
+<templatestyles src="Falling Text Effect/styles.css"/>
-<div style="text-align:{{{align|center}}}; font-family:{{{font|var(--font-family-serif)}}}; color:{{{color|#ffffff}}};">
+<span class="falling-effect" style="
-{{#ifexpr: {{{lines|4}}} >= 1 |
+  transform: translateY({{{land|100vh}}});
-<span style="display:block; font-size:{{{fontsize|16px}}}; margin-bottom:{{{spacing|5px}}}; opacity:1; {{#ifeq:{{{glow|yes}}}|yes|text-shadow:0 0 8px {{{glowcolor|white}}}, 0 0 12px {{{glowcolor|#ccc}}};|text-shadow:none;}}">{{{text|Insert Text Here}}}</span>
+  animation-name: falling-text-effect;
-}}
-{{#ifexpr: {{{lines|4}}} >= 2 |
+  animation-duration: {{{speed|3s}}};
+  animation-iteration-count: {{{repeat|1}}};
-<span style="display:block; font-size:{{{fontsize|16px}}}; margin-bottom:{{{spacing|5px}}}; opacity:0.6; {{#ifeq:{{{glow|yes}}}|yes|text-shadow:0 0 6px {{{glowcolor|white}}}, 0 0 10px {{{glowcolor|#aaa}}};|text-shadow:none;}}">{{{text|Insert Text Here}}}</span>
+  animation-fill-mode: forwards;
-}}
+  animation-timing-function: ease-in;
-{{#ifexpr: {{{lines|4}}} >= 3 |
+  text-align:{{{align|center}}};
-<span style="display:block; font-size:{{{fontsize|16px}}}; margin-bottom:{{{spacing|5px}}}; opacity:0.3; {{#ifeq:{{{glow|yes}}}|yes|text-shadow:0 0 4px {{{glowcolor|white}}}, 0 0 6px {{{glowcolor|#888}}};|text-shadow:none;}}">{{{text|Insert Text Here}}}</span>
+  font-family:{{{font|var(--font-family-serif)}}};
-}}
-{{#ifexpr: {{{lines|4}}} >= 4 |
+  font-size:{{{fontsize|16px}}};
+  color:{{{color|#ffffff}}};
-<span style="display:block; font-size:{{{fontsize|16px}}}; margin-bottom:{{{spacing|5px}}}; opacity:0.1; {{#ifeq:{{{glow|yes}}}|yes|text-shadow:0 0 2px {{{glowcolor|white}}}, 0 0 4px {{{glowcolor|#666}}};|text-shadow:none;}}">{{{text|Insert Text Here}}}</span>
+  {{#ifeq: {{{glow|yes}}} | yes | text-shadow: 0 0 6px {{{glowcolor|white}}}, 0 0 10px {{{glowcolor|#ccc}}}; | text-shadow: none;}}
-}}
+">
-</div>
+{{{text|Insert Text Here}}}
+</span>
 </includeonly>
@@ Line 23: / Line 25: @@
       "label": "Text",
       "type": "string",
+      "description": "The content that falls down the screen",
       "default": "Insert Text Here"
     },
@@ Line 34: / Line 37: @@
       "type": "string",
       "default": "serif"
+    },
+    "fontsize": {
+      "label": "Font Size",
+      "type": "string",
+      "default": "16px"
     },
     "align": {
@@ Line 50: / Line 58: @@
       "default": "#ccc"
     },
-    "fontsize": {
+    "speed": {
-      "label": "Font Size",
+      "label": "Fall Speed",
       "type": "string",
-      "default": "16px"
+      "default": "3s",
+      "description": "Time the text takes to fall (e.g., 2s, 5s)"
     },
-    "spacing": {
+    "land": {
-      "label": "Line Spacing",
+      "label": "Landing Distance",
       "type": "string",
-      "default": "5px"
+      "default": "100vh",
+      "description": "How far down the screen the text falls"
+    },
+    "repeat": {
+      "label": "Repeat Count",
+      "type": "string",
+      "default": "1",
+      "description": "How many times the text repeats the fall"
     }
   },
-  "description": "Displays fading text repeated several times with customizable glow, alignment, font, and spacing.",
+  "description": "Displays animated text that falls downward with style, glow, and animation options.",
   "format": "inline"
 }
 </templatedata>
-{{Fading Text Effect|font=comic sans|text=I should be in the center - and also I should be glowing |color=purple|glowcolor=green}}
+== Examples ==
-{{Fading Text Effect|text=I should be on the left - and also I shouldn't be glowing glow=no|fontsize=16px|spacing=6px|color=blue|align=left}}
-{{Fading Text Effect|text=I should be on the right - and I also should be glowing|align=right|glowcolor=orange|color=red}}
+{{Fading Text Effect|text=I should be in the center (also I should be glowing)|color=purple}}
+{{Fading Text Effect|text=I should be on the left (I also shouldn't be glowing)|color=blue|align=left|glow=no}}
+{{Fading Text Effect|glow=yes|text=I should be on the right (also I should be glowing)|color=red|align=right}}
 </noinclude>