Text Effects
Text1 Text2
Half transparent
//CODE -Add shadow to text
//use a shape (SVG)
$w.onReady(function () {
$w("#textV1").src = `<svg width="50" height="75" viewBox="0 0 350 75">
<g style="text-anchor: middle; font-size:35; font-weight: bold; font-family: Arial, Helvetica, sans-serif">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2 2" result="shadow"/>
<feOffset dx="6" dy="6"/>
</filter>
</defs>
<text style="filter: url(#shadow); fill: grey" x="175" y="50"> Shadowed Text</text>
<text x="175" y="50" style="fill: green"> Shadowed Text </text>
</g>
</svg>`
});
//CODE -Change style within the same textbox
//use a text element
let textProperties1 = {
numberOfStrings: 2,
fontColor: ["#FF4040", "#0000a0"],
fontFamily: ["reklamescriptw00-medium,cursive", "raleway-semibold,raleway,sans-serif"],
fontSize: ["30", "14"],
fontWeight: ["normal","bold"],
text: ["Text1", "Text2"]
}
$w.onReady(function () {
$w("#text43").html = concatText(textProperties1);
function concatText(textObj) {
let concatHtml = "<p ";
for(let i = 0; i < textObj.numberOfStrings; i++) {
concatHtml += ` style="font-size:${textObj.fontSize[i]}px; color:${textObj.fontColor[i]}; font-family:${textObj.fontFamily[i]}; font-weight:${textObj.fontWeight[i]};"> ${textObj.text[i]}</span><span`
}
let finalHtml =concatHtml.slice(0, concatHtml.length - 4) + "/p>";
return finalHtml;
}
});
//CODE -Half-transparency
//use a text element
let text = "Half transparent"//use your own text;
let opacity = 0.5;
let fontSize = "36px";
let fontWeigt = "bold";
let rgbColor = "255,215,0";
let color = `rgba(${rgbColor},${opacity})`;
$w.onReady(function () {
$w("#text45").html = `<p class="p1" style="font-size: ${fontSize};"><span style="color:${color};"><span style="font-weight:${fontWeigt}">${text}</span></span></span></p>`;
});