Chomesuke : Falling Things on Screen Script

This is a script that makes emojis or characters fall down the screen like leaves in the wind.
You can customize it with whatever emoji or special character you want. Just a heads-up: colors only change for special characters, like a ♥, for example. To add it to your blog, you can either paste the code below right before the </body> tag, or create an HTML/JavaScript Widget and paste it there.

.falling-emoji {
    display: inline-block;
    animation: sway ease-in-out infinite alternate;
    will-change: transform;
    
/* CHANGE COLOR HERE (ONLY WORKS WITH TEXT CHARACTERS) */

color: #FFFFFF;

filter: hue-rotate(320deg) saturate(2); 
  }

@keyframes fall {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(110vh); opacity: 0; }
  }

@keyframes sway {
    0% { transform: translateX(-20px) rotate(-15deg); }
    100% { transform: translateX(20px) rotate(15deg); }
  }
</style>

/* CHANGE THE CHARACTER / EMOJI CODES HERE */
  const emojis = ['\u2764', '\u{1F338}', '\u2606'];

const frequencia = 450;

function createEmoji() {
    const container = document.createElement('div');
    container.classList.add('falling-container');
    container.style.left = Math.random() * 100 + 'vw';
    
    const emojiElement = document.createElement('div');
    emojiElement.classList.add('falling-emoji');
    emojiElement.innerText = emojis[Math.floor(Math.random() * emojis.length)];
    emojiElement.style.fontSize = Math.random() * 10 + 14 + 'px';
    
    const fallDuration = Math.random() * 3 + 6;
    container.style.animationDuration = fallDuration + 's';
    
    emojiElement.style.animationDuration = (Math.random() * 1.5 + 2) + 's';
    emojiElement.style.animationDelay = (Math.random() * -2) + 's'; 
    
    container.appendChild(emojiElement);
    document.body.appendChild(container);
    
    setTimeout(() => { container.remove(); }, fallDuration * 1000);
  }

setInterval(createEmoji, frequencia);
  </script>

Click 'Read More' for the live preview and to get the character/emoji code.

Codes:
❤️: '\uFE0F'
💖: '\u{1F496}'
💜: '\u{1F49C}'
✨: '\u2728'
🌸: '\u{1F338}'
🌹: '\u{1F339}'
🌻: '\u{1F33B}'
❤: '\u2764'
♡: '\u2661'
★: '\u2605'
☆: '\u2606'
✦: '\u2726'
✿: '\u2740'
•: '\u2022'

Chomesuke

7/4/26 - Falling Things on Screen Script

No comments:

Post a Comment

tags

Followers