Last active
December 13, 2025 14:10
-
-
Save atomjoy/cfa30232cb71672ed3425068ddc4e247 to your computer and use it in GitHub Desktop.
Infinite Images Scroll in HTML CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="pl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Infinite images sccroll</title> | |
| <meta name="robots" content="noindex, nofollow"> | |
| <!-- Css, links --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --atomjoy-emoji: '🤑'; | |
| --atomjoy-color: #fff; | |
| --atomjoy-size: 50px; | |
| } | |
| body { | |
| background: black; | |
| margin: 0px; | |
| padding: 0px; | |
| min-width: 100%; | |
| max-width: 100%; | |
| min-height: 100%; | |
| max-height: 100%; | |
| overflow: hidden; | |
| font-weight: 600; | |
| color: var(--atomjoy-color); | |
| font-size: var(--atomjoy-size); | |
| font-family: Poppins, Quicksand, sans-serif; | |
| } | |
| .wrapper { | |
| max-width: 100vw; | |
| overflow: hidden; | |
| box-sizing: border-box; | |
| mask-image: linear-gradient(to right, transparent, #000, #000, transparent); | |
| } | |
| .marquee { | |
| font-size: 0px; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| display: inline-block; | |
| animation: marquee 10s linear infinite; | |
| /* animation-direction: reverse; */ | |
| } | |
| .marquee div { | |
| font-size: 20px; | |
| box-sizing: border-box; | |
| display: inline-block; | |
| position: relative; | |
| margin: 0px; | |
| padding: 0px; | |
| min-width: 100vw; | |
| /* border: 1px dotted #df2; */ | |
| } | |
| .marquee div img { | |
| margin-inline: 20px; | |
| max-height: 100px; | |
| } | |
| @keyframes marquee { | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| 100% { | |
| transform: translate3d(-50%, 0, 0); | |
| } | |
| } | |
| </style> | |
| <script> | |
| const url = '/donation/bests/line' | |
| async function refresh() { | |
| let el = document.querySelectorAll('.line') | |
| // Images | |
| el.forEach(element => { | |
| for (let index = 1; index < 15; index++) { | |
| let img = new Image() | |
| img.src = 'https://i.pravatar.cc/150?img=' + index | |
| if (index % 2) { | |
| img.src = 'https://picsum.photos/id/3' + index + '/200/100' | |
| } | |
| element.appendChild(img) | |
| } | |
| }) | |
| // Text | |
| // el.forEach(element => { | |
| // element.innerText = '123 Hello from infinite scroll ... too long text ... 456 Wow from infinite scroll ... long text ... 789 !!!' | |
| // }) | |
| } | |
| onload = (event) => { | |
| refresh() | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <div class="marquee"> | |
| <div class="line"></div> | |
| <div class="line"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment