|
|
| خط ۱: |
خط ۱: |
| <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%, 100% { border-color: #ff7a00; }
| |
| 50% { border-color: transparent; }
| |
| }
| |
| </style>
| |
|
| |
|
| <!-- ۲. کادر مخفی برای دریافت پارامتر الگو -->
| |
| <div id="sanjab-source-{{{id|1}}}" style="display:none;">{{{1|متن پیشفرض}}}</div>
| |
|
| |
|
| <!-- ۳. کادر اصلی نمایش انیمیشن --> | | <html> |
| <div class="sanjab-box">
| |
| <span id="sanjab-target-{{{id|1}}}" class="sanjab-txt sanjab-cursor-blink"></span>
| |
| </div>
| |
| | |
| <!-- ۴. اسکریپت لودر و تایپرایتر -->
| |
| <img src="x" onerror='
| |
| (function() {
| |
| var srcEl = document.getElementById("sanjab-source-{{{id|1}}}");
| |
| var targetEl = document.getElementById("sanjab-target-{{{id|1}}}");
| |
| if (!srcEl || !targetEl) return;
| |
|
| |
| var text = srcEl.innerHTML.trim();
| |
| var i = 0;
| |
| var tokens = [];
| |
|
| |
|
| // تبدیل متن به توکنهای کاراکتری با حفظ تگهای br
| | <div class="sanjab-typewriter" data-text="{{{1|}}}"></div> |
| var tempText = text;
| |
| while (tempText.length > 0) {
| |
| var lower = tempText.toLowerCase();
| |
| if (lower.startsWith("<br>")) {
| |
| tokens.push("<br>");
| |
| 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 {
| |
| tokens.push(tempText[0]);
| |
| tempText = tempText.substring(1);
| |
| }
| |
| }
| |
|
| |
|
| function type() {
| |
| if (i < tokens.length) {
| |
| if (tokens[i] === "<br>") {
| |
| targetEl.innerHTML += "<br>";
| |
| } else {
| |
| targetEl.innerHTML += tokens[i];
| |
| }
| |
| i++;
| |
| setTimeout(type, 70); // سرعت تایپ کاراکترها
| |
| } else {
| |
| // تکرار انیمیشن
| |
| setTimeout(function() {
| |
| targetEl.innerHTML = "";
| |
| i = 0;
| |
| type();
| |
| }, 2500); // مکث ۲.۵ ثانیهای در پایان جمله
| |
| }
| |
| }
| |
| setTimeout(type, 500);
| |
| })();
| |
| ' style="display:none;">
| |
| </html> | | </html> |