yep just like it looks it is a comprehensive perchance text field text all around cosmetics controller, currently it has planned all of these
rawCSS for dynamic applicatios and storing atuff kike custok fonta i plan to add some of those aswell making them pre available upon imoorting this plugin bellow is just the main function call standard $output function plugin all i know is something is wrong with the plugins javascript formating / syntax / that or its brackets. use url attached to this post to go to its pubkic generator import of plugin generator. if i can get this thing working i plan to maintain upgrade and keep these features available to all for free and allow copying and or redefining my plugin. Id just want soke help you know fuxing it. ..
/ Usage: // [txtFx(txt, font, fxType, gradDir, fxDur, strk, strkCol, strkWid, shd3d, shd3dCol, shd3dX, shd3dY, glow, glowAnim, glowDur, glowBlur, glowTrans, glowColSpec, ...cols)] // // Parameters (use null or "" to skip optional parameters and use defaults): // txt: (String) The content of the text. // font: (String, optional CSS font-family name. // // fxType: (String) "none", "gradient", "animatedGradient", "colorCycle", "colorFlash", "randomColorCycle". // gradDir: (String, optional) For gradients. // fxDur: (String, optional) For animated text effects. // // strk: ("O" / "on" / true for on; "I" / "off" / false for off). Stroke enabled. // strkCol: (String, optional) Color of stroke. // strkWid: (String, optional) Width of stroke. // // shd3d: ("O" / "on" / true for on; "I" / "off" / false for off). 3D Shadow enabled. // shd3dCol: (String, optional) Color of 3D shadow. // shd3dX: (String, optional) Horizontal offset. // shd3dY: (String, optional) Vertical offset. // // glow: ("O" / "on" / true for on; "I" / "off" / false for off). Glow enabled. // glowAnim: (String, optional) "colorCycle", "pulsate". // glowDur: (String, optional) Duration of glow animation. // glowBlur: (String, optional) Blur radius. // glowTrans: (String, optional) "fade", "flash". // // glowColSpec: (String/Number) // - "1", "2", "3", "4", "5": Specifies the number of glow colors to read from ...cols. // - A color string (e.g., "red"): Specifies a single, static glow color. // - null or "": Uses default glow colors (white, or 2 colors if animationType is colorCycle). // // ...cols: (Variable) This is where you list your glow colors (if glowColSpec is a number) // followed by your text effect colors.
it even makes use of rawCSS block importation and storing //
CSS Definitions (rawCSS block)
rawCSS
//
Global Helper for Dynamic Style Injection
addDynamicStyle = (cssContent, id) => if(!window._txtFxDynamicStyles) { window._txtFxDynamicStyles = {}; } if(!window._txtFxDynamicStyles[id]){ let styleTag = document.createElement('style'); styleTag.id = id; styleTag.innerHTML = cssContent; document.head.appendChild(styleTag); window._txtFxDynamicStyles[id] = true; }
//
$output Function
$output(txt, font = null, fxType = "none", gradDir = null, fxDur = null, strk = false, strkCol = null, strkWid = null, shd3d = false, shd3dCol = null, shd3dX = null, shd3dY = null, glow = false, glowAnim = null, glowDur = null, glowBlur = null, glowTrans = null, glowColSpec = null, ...cols) => let outputStr = ""; let styleStr = ""; let textShadows = []; let uniqueId = Math.random().toString(36).substring(7);
let isOn = (val) => { return (val === "O" || val === "on" || val === true); };
;; if(fxType == "animatedGradient") { styleStr += background-size: 200% auto; animation: text-effects-gradient-bg-animation ${fxDur || "5s"} linear infinite;; } } else if(fxType == "colorCycle" || fxType == "colorFlash" || fxType == "randomColorCycle") { let textEffectAnimationName = "text-effect-anim-" + uniqueId; let textColorsToUse = (fxType == "randomColorCycle" && effectiveTextColors.length == 0) ? "red, orange, yellow, green, blue, indigo, violet, purple, pink, cyan, magenta, lime".split(", ").shuffle : effectiveTextColors; let textColorsKeyframes = textColorsToUse.map(function(color, index) { let percentage = (index / textColorsToUse.length) * 100; return ${percentage}% { color: ${color}; }; }).join("\n"); textColorsKeyframes += \n100% { color: ${textColorsToUse[0]}; }; let textEffectAnimationCSS =
@keyframes ${textEffectAnimationName} {
${textColorsKeyframes}
}
; addDynamicStyle(textEffectAnimationCSS, textEffectAnimationName); let timingFunction = (fxType == "colorFlash" ? "steps(1)" : "linear"); styleStr += animation: ${textEffectAnimationName} ${fxDur || "5s"} ${timingFunction} infinite;`;
}
if(isOn(strk)) {
let finalStrokeColor = strkCol || "black";
let finalStrokeWidth = strkWid || "1px";
styleStr += -webkit-text-stroke: ${finalStrokeWidth} ${finalStrokeColor}; text-stroke: ${finalStrokeWidth} ${finalStrokeColor};;
}
if(isOn(shd3d)) {
let finalShadow3dColor = shd3dCol || "rgba(0,0,0,0.5)";
let finalShadow3dOffsetX = shd3dX || "1px";
let finalShadow3dOffsetY = shd3dY || "1px";
let shadows = [];
for(let i = 1; i <= 5; i++) {
shadows.push(${parseFloat(finalShadow3dOffsetX) * i}px ${parseFloat(finalShadow3dOffsetY) * i}px 0 ${finalShadow3dColor});
}
textShadows.push(shadows.join(", "));
}
if(isOn(glow)) { let finalGlowColors = parsedGlowColors.length > 0 ? parsedGlowColors : ["rgba(255, 255, 255, 0.7)"]; let numGlowColors = finalGlowColors.length; let baseGlowColor = finalGlowColors[0]; let finalGlowBlur = glowBlur || "5px"; let finalGlowDuration = glowDur || "3s"; let finalGlowAnimationType = glowAnim || (numGlowColors > 1 ? "colorCycle" : "none"); let finalGlowTransitionType = glowTrans || "fade";
if(finalGlowAnimationType == "colorCycle" && numGlowColors > 1) {
let glowAnimationName = "glow-anim-" + uniqueId;
let timingFunction = (finalGlowTransitionType == "flash" ? "steps(1)" : "linear");
let glowColorsKeyframes = finalGlowColors.map(function(color, index) {
let percentage = (index / finalGlowColors.length) * 100;
let shadow = `0 0 ${finalGlowBlur} ${color}, 0 0 ${parseFloat(finalGlowBlur) * 1.5}px ${color}`;
return `${percentage}% { text-shadow: ${shadow}; }`;
}).join("\n");
glowColorsKeyframes += `\n100% { text-shadow: 0 0 ${finalGlowBlur} ${finalGlowColors[0]}, 0 0 ${parseFloat(finalGlowColors[0]) * 1.5}px ${finalGlowColors[0]}; }`;
let glowAnimationCSS = `
@keyframes ${glowAnimationName} {
${glowColorsKeyframes}
}
`;
addDynamicStyle(glowAnimationCSS, glowAnimationName);
textShadows.push(`animation: ${glowAnimationName} ${finalGlowDuration} ${timingFunction} infinite;`);
} else if(finalGlowAnimationType == "pulsate") {
let glowAnimationName = "glow-anim-" + uniqueId;
let minBlur = (parseFloat(finalGlowBlur) / 3) + "px";
let maxBlur = finalGlowBlur;
let glowAnimationCSS = `
@keyframes ${glowAnimationName} {
0% { text-shadow: 0 0 ${minBlur} ${baseGlowColor}, 0 0 ${parseFloat(minBlur) * 1.5}px ${baseGlowColor}; opacity: 0.7; }
50% { text-shadow: 0 0 ${maxBlur} ${baseGlowColor}, 0 0 ${parseFloat(maxBlur) * 1.5}px ${baseGlowColor}; opacity: 1; }
100% { text-shadow: 0 0 ${minBlur} ${baseGlowColor}, 0 0 ${parseFloat(minBlur) * 1.5}px ${baseGlowColor}; opacity: 0.7; }
}
`;
addDynamicStyle(glowAnimationCSS, glowAnimationName);
textShadows.push(`animation: ${glowAnimationName} ${finalGlowDuration} linear infinite;`);
} else {
textShadows.push(`0 0 ${finalGlowBlur} ${baseGlowColor}, 0 0 ${parseFloat(finalGlowBlur) * 1.5}px ${baseGlowColor}`);
}
}
if(textShadows.length > 0){
styleStr += text-shadow: ${textShadows.join(", ")};;
}
return <span class="text-effects-base" style="${styleStr}">${txt}</span>;