فونت متحرک - فراغیب
Esfandiari (بحث | مشارکتها) صفحهای تازه حاوی «<html> <style> .sanjab-box { direction: rtl; text-align: center; font-family: Tahoma, Arial, sans-serif; font-size: 50px; font-weight: bold; line-height: 1.6; color: #1a202c; margin: 20px 0; min-height: 80px; } .sanjab-txt { border-left: 3px solid #ff7a00; padding-left: 5px; display: inline; } .sanjab-cursor-blink { animation: sj-blink 0.8s infinite; } @keyframes sj-blink { 0%,...» ایجاد کرد |
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
||
| خط ۱۲: | خط ۱۲: | ||
min-height: 80px; | min-height: 80px; | ||
} | } | ||
.sanjab-txt { | .sanjab-txt { | ||
border-left: 3px solid #ff7a00; | border-left: 3px solid #ff7a00; | ||
| خط ۱۸: | خط ۱۷: | ||
display: inline; | display: inline; | ||
} | } | ||
.sanjab-cursor-blink { | .sanjab-cursor-blink { | ||
animation: sj-blink 0.8s infinite; | animation: sj-blink 0.8s infinite; | ||
} | } | ||
@keyframes sj-blink { | @keyframes sj-blink { | ||
0%, 100% { border-color: #ff7a00; } | 0%, 100% { border-color: #ff7a00; } | ||
| خط ۲۹: | خط ۲۶: | ||
</style> | </style> | ||
<!-- ۱. متن ورودی در این کادر مخفی قرار میگیرد تا مدیاویکی پارامتر الگو را درست پردازش کند --> | |||
<div id="sanjab-source-{{{id|1}}}" style="display:none;">{{{1|متن پیشفرض}}}</div> | |||
<!-- ۲. کادر اصلی نمایش انیمیشن --> | |||
<div class="sanjab-box"> | <div class="sanjab-box"> | ||
<span id="sanjab-target-{{{id|1}}}" class="sanjab-txt sanjab-cursor-blink"></span> | <span id="sanjab-target-{{{id|1}}}" class="sanjab-txt sanjab-cursor-blink"></span> | ||
</div> | </div> | ||
<!-- ۳. اسکریپت خواندن متن و اجرای انیمیشن --> | |||
<img src="x" onerror=' | <img src="x" onerror=' | ||
(function() { | (function() { | ||
var | var srcEl = document.getElementById("sanjab-source-{{{id|1}}}"); | ||
var | var targetEl = document.getElementById("sanjab-target-{{{id|1}}}"); | ||
if (!srcEl || !targetEl) return; | |||
var text = srcEl.innerHTML.trim(); | |||
var i = 0; | var i = 0; | ||
var tokens = []; | var tokens = []; | ||
// تفکیک متن و تگهای br | |||
var tempText = text; | var tempText = text; | ||
while (tempText.length > 0) { | while (tempText.length > 0) { | ||
if ( | var lower = tempText.toLowerCase(); | ||
if (lower.startsWith("<br>")) { | |||
tokens.push("<br>"); | tokens.push("<br>"); | ||
tempText = tempText.substring(4); | tempText = tempText.substring(4); | ||
} else if (lower.startsWith("<br/>")) { | |||
tokens.push("<br>"); | |||
tempText = tempText.substring(5); | |||
} else if (lower.startsWith("<br />")) { | |||
tokens.push("<br>"); | |||
tempText = tempText.substring(6); | |||
} else { | } else { | ||
tokens.push(tempText[0]); | tokens.push(tempText[0]); | ||
| خط ۵۴: | خط ۶۷: | ||
if (i < tokens.length) { | if (i < tokens.length) { | ||
if (tokens[i] === "<br>") { | if (tokens[i] === "<br>") { | ||
targetEl.innerHTML += "<br>"; | |||
} else { | } else { | ||
targetEl.innerHTML += tokens[i]; | |||
} | } | ||
i++; | i++; | ||
| خط ۶۲: | خط ۷۵: | ||
} else { | } else { | ||
setTimeout(function() { | setTimeout(function() { | ||
targetEl.innerHTML = ""; | |||
i = 0; | i = 0; | ||
type(); | type(); | ||
| خط ۶۸: | خط ۸۱: | ||
} | } | ||
} | } | ||
setTimeout(type, 400); | |||
setTimeout(type, | |||
})(); | })(); | ||
' style="display:none;"> | ' style="display:none;"> | ||
</html> | </html> | ||
نسخهٔ ۳۰ ژوئیهٔ ۲۰۲۶، ساعت ۱۷:۲۵