menu


INPUT:

<input type="text" id="animatedInput" placeholder=" " />

    <script>
        const input = document.getElementById("animatedInput");
        const texts = ["შეიყვანე ტექსტი...", "მოიფიქრე რამე...", "დააკლიკე აქ..."];
        let textIndex = 0;
        let charIndex = 0;
        let isDeleting = false;

        function typeEffect() {
            let currentText = texts[textIndex];

            if (!isDeleting) {
                // აკრეფის ეფექტი
                input.placeholder = currentText.substring(0, charIndex + 1);
                charIndex++;

                if (charIndex === currentText.length) {
                    isDeleting = true;
                    setTimeout(typeEffect, 1500); // დაყოვნება ტექსტის დასრულების შემდეგ
                    return;
                }
            } else {
                // წაშლის ეფექტი
                input.placeholder = currentText.substring(0, charIndex - 1);
                charIndex--;

                if (charIndex === 0) {
                    isDeleting = false;
                    textIndex = (textIndex + 1) % texts.length; // გადავდივართ შემდეგ ტექსტზე
                }
            }

            setTimeout(typeEffect, isDeleting ? 50 : 150); // წაშლა სწრაფია, აკრეფა ნელი
        }

        setTimeout(typeEffect, 1000); // 1 წამი დაყოვნება დაწყებამდე
    </script>

DIV :

<div class="typing-container" id="animatedText"></div>

    <script>
        const textContainer = document.getElementById("animatedText");
        const texts = ["გამარჯობა!", "როგორ ხარ?", "კეთილი იყოს თქვენი მობრძანება!"];
        let textIndex = 0;
        let charIndex = 0;
        let isDeleting = false;

        function typeEffect() {
            let currentText = texts[textIndex];

            if (!isDeleting) {
                // აკრეფის ეფექტი
                textContainer.textContent = currentText.substring(0, charIndex + 1);
                charIndex++;

                if (charIndex === currentText.length) {
                    isDeleting = true;
                    setTimeout(typeEffect, 1500); // დაყოვნება ტექსტის დასრულების შემდეგ
                    return;
                }
            } else {
                // წაშლის ეფექტი
                textContainer.textContent = currentText.substring(0, charIndex - 1);
                charIndex--;

                if (charIndex === 0) {
                    isDeleting = false;
                    textIndex = (textIndex + 1) % texts.length; // გადავდივართ შემდეგ ტექსტზე
                }
            }

            setTimeout(typeEffect, isDeleting ? 50 : 150); // წაშლა სწრაფია, აკრეფა ნელი
        }

        setTimeout(typeEffect, 1000); // 1 წამი დაყოვნება დაწყებამდე
    </script>


ტექსტის, input-ში, ანიმაცია

avatar
Geo|Eng