فراغیب

الگو:متن متحرک: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:


<html>
<html lang="fa" dir="rtl">
<!-- ۱. بخش استایل‌ها -->
<head>
<style>
    <meta charset="UTF-8">
.sanjab-box {
     <title>متن تایپ‌شونده با صدا</title>
     direction: rtl;
    text-align: center;
    font-family: iransans;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.6;
    color: #1a202c;
    margin: 20px 0;
    min-height: 80px;
}


.sanjab-txt {
    <style>
    border-left: 3px solid #ff7a00; /* رنگ نارنجی سنجاب */
        .sanjab-box {
    padding-left: 5px;
            direction: rtl;
    text-shadow: 2px 3px 4px #000000;
            text-align: center;
    color: #00CCCC ;
            font-family: iransans, Tahoma, sans-serif;
    display: inline;
            font-size: 30px;
}
            font-weight: bold;
            line-height: 1.6;
            color: #1a202c;
            margin: 20px 0;
            min-height: 80px;
        }


.sanjab-cursor-blink {
        .sanjab-txt {
    animation: sj-blink 0.8s infinite;
            border-left: 3px solid #ff7a00;
}
            padding-left: 5px;
            text-shadow: 2px 3px 4px #000000;
            color: #00cccc;
            display: inline;
        }


@keyframes sj-blink {
        .sanjab-cursor-blink {
    0%, 100% { border-color: #ff7a00; }
            animation: sj-blink 0.8s infinite;
    50% { border-color: transparent; }
        }
}
</style>


<!-- ۲. ساختار متن -->
        @keyframes sj-blink {
<div class="sanjab-box">
            0%, 100% {
    <span id="sanjab-target" class="sanjab-txt sanjab-cursor-blink"></span>
                border-color: #ff7a00;
</div>
            }


<!-- ۳. اسکریپت اجرا کننده با قابلیت تکرار (Loop) -->
             50% {
<img src="x" onerror='
                 border-color: transparent;
    (function() {
        var text = "پذیرش اهدا کننده و گیرنده درمان نوبت دهی، پزشک ، بیمارستان ";
        var target = document.getElementById("sanjab-target");
        var i = 0;
        var tokens = [];
       
        var tempText = text;
        while(tempText.length > 0) {
             if(tempText.startsWith("<br>")) {
                 tokens.push("<br>");
                tempText = tempText.substring(4);
            } else {
                tokens.push(tempText[0]);
                tempText = tempText.substring(1);
             }
             }
         }
         }


         function type() {
         /* پیام فعال‌سازی صدا */
             if (i < tokens.length) {
        #sound-notice {
                 if (tokens[i] === "<br>") {
            display: none;
                     target.innerHTML += "<br>";
            margin: 10px auto;
            padding: 8px 14px;
            width: fit-content;
            border-radius: 8px;
            background: #fff3e8;
            color: #b94f00;
            font-family: Tahoma, sans-serif;
            font-size: 13px;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
 
    <div class="sanjab-box">
        <span id="sanjab-target" class="sanjab-txt sanjab-cursor-blink"></span>
    </div>
 
    <div id="sound-notice">
        برای فعال شدن صدای تایپ، اینجا کلیک کنید
    </div>
 
    <script>
        (function () {
             const text = "پذیرش اهدا کننده و گیرنده درمان نوبت دهی، پزشک، بیمارستان";
            const target = document.getElementById("sanjab-target");
            const soundNotice = document.getElementById("sound-notice");
 
            const typingSpeed = 70;  // سرعت ظاهر شدن هر کاراکتر (میلی‌ثانیه)
            const restartDelay = 2500; // مکث بعد از کامل شدن متن
 
            let i = 0;
            let audioContext = null;
            let soundEnabled = false;
 
            /*
            * ساخت صدای کوتاه تایپ با Web Audio API
            */
            function playTypingSound() {
                if (!soundEnabled || !audioContext) return;
 
                try {
                    const oscillator = audioContext.createOscillator();
                    const gainNode = audioContext.createGain();
 
                    oscillator.type = "square";
                    oscillator.frequency.setValueAtTime(
                        650 + Math.random() * 250,
                        audioContext.currentTime
                    );
 
                    // صدای بسیار کوتاه و ملایم
                    gainNode.gain.setValueAtTime(0.025, audioContext.currentTime);
                    gainNode.gain.exponentialRampToValueAtTime(
                        0.001,
                        audioContext.currentTime + 0.035
                    );
 
                    oscillator.connect(gainNode);
                    gainNode.connect(audioContext.destination);
 
                    oscillator.start();
                    oscillator.stop(audioContext.currentTime + 0.04);
 
                } catch (error) {
                    console.log("صدای تایپ اجرا نشد:", error);
                }
            }
 
            /*
            * فعال‌سازی صدا پس از تعامل کاربر
            */
            function enableSound() {
                 try {
                    if (!audioContext) {
                        audioContext = new (window.AudioContext || window.webkitAudioContext)();
                    }
 
                    if (audioContext.state === "suspended") {
                        audioContext.resume();
                    }
 
                    soundEnabled = true;
                    soundNotice.style.display = "none";
 
                } catch (error) {
                    soundEnabled = false;
                    console.log("مرورگر از پخش صدا پشتیبانی نمی‌کند.");
                }
            }
 
            /*
            * نوشتن کاراکترها
            */
            function typeText() {
                if (i < text.length) {
                    const character = text[i];
 
                     target.textContent += character;
 
                    // فقط برای حروف و علائم صدا پخش شود؛ نه فاصله‌ها
                    if (character.trim() !== "") {
                        playTypingSound();
                    }
 
                    i++;
                    setTimeout(typeText, typingSpeed);
 
                 } else {
                 } else {
                     target.innerHTML += tokens[i];
                     // مکث، پاک‌سازی و شروع مجدد
                    setTimeout(function () {
                        target.textContent = "";
                        i = 0;
                        typeText();
                    }, restartDelay);
                 }
                 }
                i++;
                setTimeout(type, 70); // سرعت تایپ کاراکترها (۷۰ میلی‌ثانیه)
            } else {
                // --- بخش تکرار از نو ---
                setTimeout(function() {
                    target.innerHTML = ""; // پاک کردن متن برای شروع مجدد
                    i = 0;                // بازنشانی شمارنده
                    type();                // شروع دوباره تایپ
                }, 2500);                  // ۲.۵ ثانیه مکث قبل از شروع مجدد
             }
             }
        }
       
        setTimeout(type, 500);
    })();
' style="display:none;">


            /*
            * تلاش برای فعال کردن صدا با اولین کلیک، لمس یا فشردن کلید
            */
            document.addEventListener("click", enableSound, { once: true });
            document.addEventListener("touchstart", enableSound, { once: true });
            document.addEventListener("keydown", enableSound, { once: true });
            // اگر مرورگر اجازه ندهد، پیام فعال‌سازی نمایش داده می‌شود
            soundNotice.style.display = "block";
            soundNotice.addEventListener("click", enableSound);
            // شروع انیمیشن متن
            setTimeout(typeText, 500);
        })();
    </script>
</body>
</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:متن_متحرک»