DEV Community

الشايب
الشايب

Posted on

Untitled

#codepen

<!DOCTYPE html>









مطر الكلمات المرتب

<br>
body {<br>
margin: 0;<br>
overflow: hidden;<br>
background: #000;<br>
font-family: &#39;Courier New&#39;, monospace;<br>
touch-action: none;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> .container {
position: relative;
width: 100vw;
height: 100vh;
} 
.word {
    position: absolute;
    color: #fff;
    text-shadow: 0 0 10px #00f;
    font-size: 24px;
    white-space: nowrap;
    transition: opacity 0.5s;
}

.particle {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
}

@media (max-width: 768px) {
    .word {
        font-size: 5vw;
    }
}
Enter fullscreen mode Exit fullscreen mode

&lt;/style&gt;
</code></pre></div>
<p></head><br>
<body><br>
<div class="container"></div></p>
<div class="highlight"><pre class="highlight plaintext"><code>&lt;script&gt;
const words = ['عبدالله', 'متى', 'تشتري', 'لي', 'دزرت'];
let currentWordIndex = 0;
const container = document.querySelector('.container');
let isAnimating = false;

function createOrderedWord() {
    if (isAnimating) return;

    isAnimating = true;
    const word = document.createElement('div');
    word.className = 'word';
    word.textContent = words[currentWordIndex];

    currentWordIndex = (currentWordIndex + 1) % words.length;

    const x = Math.random() * (window.innerWidth - 100);
    const y = -30;

    word.style.left = `${x}px`;
    word.style.top = `${y}px`;

    container.appendChild(word);
    animateOrderedWord(word);
}

function animateOrderedWord(element) {
    let y = parseFloat(element.style.top);
    let speed = 2;
    let rotation = 0;

    function animate() {
        y += speed;
        speed *= 1.02;
        rotation += 2;

        element.style.top = `${y}px`;
        element.style.transform = `rotate(${rotation}deg)`;

        if (y &amp;lt; window.innerHeight) {
            requestAnimationFrame(animate);
        } else {
            explode(element);
            element.remove();
            isAnimating = false;
        }
    }

    requestAnimationFrame(animate);
}

function explode(element) {
    const rect = element.getBoundingClientRect();
    for (let i = 0; i &amp;lt; 10; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        particle.style.width = `${Math.random() * 5}px`;
        particle.style.height = particle.style.width;
        particle.style.left = `${rect.left + rect.width/2}px`;
        particle.style.top = `${rect.top}px`;
        particle.style.opacity = '0.8';

        container.appendChild(particle);

        const angle = Math.random() * Math.PI * 2;
        const velocity = Math.random() * 10;

        animateParticle(particle, angle, velocity);
    }
}

function animateParticle(element, angle, velocity) {
    let x = parseFloat(element.style.left);
    let y = parseFloat(element.style.top);
    let alpha = 0.8;

    function animate() {
        x += Math.cos(angle) * velocity;
        y += Math.sin(angle) * velocity + 2;
        alpha -= 0.02;

        element.style.left = `${x}px`;
        element.style.top = `${y}px`;
        element.style.opacity = alpha;

        if (alpha &amp;gt; 0) {
            requestAnimationFrame(animate);
        } else {
            element.remove();
        }
    }

    requestAnimationFrame(animate);
}

// بدء إنشاء الكلمات بالترتيب المحدد
setInterval(createOrderedWord, 1000);

window.addEventListener('resize', () =&amp;gt; {
    document.querySelectorAll('.word').forEach(word =&amp;gt; {
        if (parseFloat(word.style.top) &amp;lt; 0) {
            word.style.left = `${Math.random() * (window.innerWidth - 100)}px`;
        }
    });
});
Enter fullscreen mode Exit fullscreen mode

&lt;/script&gt;
</code></pre></div>
<p></body><br>
</html></p>

Top comments (0)