Added Infinite Scroll Emoji Background (#1391)

abhirajadhikary06 · web-flow · commit 1c7e2fe98475 · 2024-12-09T20:13:50.000+05:30
diff --git a/Components/Backgrounds/Infinite-Scroll-Emoji-Background/index.html b/Components/Backgrounds/Infinite-Scroll-Emoji-Background/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Infinite Scroll Emoji Background</title>
+</head>
+<body>
+    <div class="emoji-container"></div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Components/Backgrounds/Infinite-Scroll-Emoji-Background/script.js b/Components/Backgrounds/Infinite-Scroll-Emoji-Background/script.js
@@ -0,0 +1,24 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const emojiContainer = document.querySelector('.emoji-container');
+    const emojis = ['😂', '🤣', '😁', '🤭', '😈', '👻', '💀', '👀', '🐼', '🐸', '🐣', '🐳', '🦀', '🌝', '🌟', '🌈', '🌞', '🥑', '🌽', '🍔', '🍟', '🍺', '🍕', '🍿', '🗿', '💎', '🍀', '🚀', '🗽', '🗼', '🏯'];
+
+    const numberOfLines = Math.floor(window.innerWidth / 40);
+
+    for (let i = 0; i < numberOfLines; i++) {
+        const line = document.createElement('div');
+        line.classList.add('emoji-line');
+        const emojiDiv = document.createElement('div');
+
+        for (let j = 0; j < 30; j++) {
+            const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
+            const emojiElement = document.createElement('div');
+            emojiElement.classList.add('emoji');
+            emojiElement.textContent = randomEmoji;
+            emojiDiv.appendChild(emojiElement);
+        }
+
+        line.appendChild(emojiDiv);
+        line.appendChild(emojiDiv.cloneNode(true));
+        emojiContainer.appendChild(line);
+    }
+});
diff --git a/Components/Backgrounds/Infinite-Scroll-Emoji-Background/style.css b/Components/Backgrounds/Infinite-Scroll-Emoji-Background/style.css
@@ -0,0 +1,48 @@
+body {
+    margin: 0;
+    overflow: hidden;
+    background-color: #000000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    font-family: monospace;
+}
+
+.emoji-container {
+    display: flex;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.emoji-line {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    margin: 0 5px;
+    position: relative;
+    overflow: hidden;
+}
+
+@keyframes scroll {
+    0% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(-100%);
+    }
+}
+
+.emoji-line div {
+    display: flex;
+    flex-direction: column;
+    animation: scroll linear infinite;
+    animation-duration: 20s; /* Adjust speed here */
+}
+
+.emoji {
+    font-size: 1rem; /* Emoji size */
+    padding: 5px;
+    text-align: center;
+}
diff --git a/assets/html_files/backgrounds.html b/assets/html_files/backgrounds.html
@@ -352,6 +352,19 @@ <h1>Gradient Waves Background</h1>
                     </a>
                 </div>
             </div>
+            <div class="box">
+                <h1>Infinite Scroll Emoji Background</h1>
+                <div class="preview">
+                    <a href="../../Components/Backgrounds/Infinite-Scroll-Emoji-Background/index.html" title="Live Preview" target="_blank">
+                        <img src="../images/link.png">
+                    </a>
+                </div>
+                <div class="source">
+                    <a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Infinite-Scroll-Emoji-Background" title="Source Code" target="_blank">
+                        <img src="../images/github.png">
+                    </a>
+                </div>
+            </div>
             <div class="box">
                 <h1>Interactive Balls Background</h1>
                 <div class="preview">
