เเหล่งเรียนรู้

 promp จากโค้ชดังกล่าวข้างต้นปรับเเต่ เเก้ไข เพิ่มเติมการเเสงผลให้ตัวอักษรเเต่ละตัวกระพริบแบบสีการ์ตูนดิสนีเเละเคลื่อนที่ซ้ายขวาในความเร็วที่ช้า มีขนาดตัวอักษร40 โดยยังคงรูปแบบโค้ชเดิม
 

<style>

/* 1. สไตล์พื้นฐานและขนาดตัวอักษร */

.disney-flashing-text {

    font-size: 40px;

    display: inline-block; /* ทำให้ span รับสไตล์ได้ */

    /* ใช้แอนิเมชันกระพริบสลับสีสดใส */

    animation: disney-flash 1s infinite alternate; 

    font-family: Arial, sans-serif; /* อาจเพิ่มฟอนต์ที่อ่านง่าย */

    font-weight: 900; /* ทำให้ตัวอักษรหนามากเพื่อความโดดเด่น */

}

/* 2. Keyframes สำหรับการเปลี่ยนสีแบบการ์ตูนดิสนีย์ (สีหลักที่สดใส) */

@keyframes disney-flash {

    0%   { color: #0077B6; } /* น้ำเงินสดใส (Vibrant Blue) */

    25%  { color: #FFD700; } /* ทอง/เหลืองสว่าง (Bright Gold) */

    50%  { color: #D62828; } /* แดงเข้ม/สด (Deep Red) */

    75%  { color: #00A300; } /* เขียวสว่าง (Bright Green) */

    100% { color: #FF7F50; } /* ส้ม/ปะการัง (Coral/Orange) */

}

</style>

<marquee id="disneyMarquee" direction="right" behavior="alternate" scrollamount="1" scrolldelay="40" style="width: 100%;">

    การประถมศึกษา

</marquee>

<script>

    // 3. JavaScript เพื่อแยกตัวอักษรแต่ละตัว

    const marquee = document.getElementById('disneyMarquee');

    const text = marquee.textContent;

    let newHTML = '';

    // ห่อหุ้มตัวอักษรแต่ละตัวด้วยแท็ก span ที่มี class สำหรับการกระพริบ

    for (let i = 0; i < text.length; i++) {

        // เพิ่มการหน่วงเวลา (delay) ให้กับแต่ละตัวอักษรเพื่อให้กระพริบไม่พร้อมกัน

        const delay = i * 0.1; 

        newHTML += `<span class="disney-flashing-text" style="animation-delay: ${delay}s;">${text[i]}</span>`;

    }

    marquee.innerHTML = newHTML;

</script>