Bildlaufleiste erstellen

HTML

Kopiere den folgenden Code und setze ihn in den <body>-Bereich Deiner Webseite.

html

<div class="scroll-container">
<div class="scroll-content">
<img src="Dein Bild.jpg" alt="Bild 1">
<img src="Dein Bild.jpg" alt="Bild 2">
<img src="Dein Bild.jpg" alt="Bild 3">
<img src="Dein Bild.jpg" alt="Bild 4">
<!-- Warum die Bilder doppelt sind – der Trick für endloses Scrollen -->
<img src="Dein Bild.jpg" alt="Bild 1">
<img src="Dein Bild.jpg" alt="Bild 2">
<img src="Dein Bild.jpg" alt="Bild 3">
<img src="Dein Bild.jpg" alt="Bild 4">
</div>
</div>

Kopiere den Stil-Code in Deine CSS-Datei.
Du kannst die Farben anschließend an Dein Design anpassen.

css

 .scroll-container {
justify-content: center; 
margin: 0 auto;
width: 250px;
height: 250px;
overflow: hidden;
position: relative;
border: 1px solid #ccc;
}

.scroll-content {
display: flex;
flex-direction: column;
animation: scrollUp 25s linear infinite;
align-items: center;
}

.scroll-content:hover {
animation-play-state: paused;
}

.scroll-content img {
width: 250px;
margin-bottom: 20px; 
user-select: none; 
pointer-events: none;
}

@keyframes scrollUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}

css

.scroll-container {
width: 250px;
height: 250px;

Du kannst die width & height: ganz nach Deinen Bedürfnissen anpassen.

css

.scroll-content img {
width: 250px;
margin-bottom: 20px;
}

Alle Bilder bekommen die Breite von 250px (passt zum Container).
Mit margin-bottom: entsteht unter jedem Bild ein Abstand von 20 Pixeln.
So kleben die Bilder nicht direkt aneinander, sondern stehen luftig untereinander.

html

<div class="scroll-container">
<div class="scroll-content">
<img src="Dein Bild.jpg" alt="Bild 1">
<img src="Dein Bild.jpg" alt="Bild 2">

.scroll-container ist die sichtbare Box, die den Scrollbereich begrenzt.
.scroll-content enthält alle Bilder, die animiert nach oben scrollen.
Ersetze Dein Bild.jpgdurch den direkten Link zu Deinem Bild
Hinweis: Die Bilder sind bewusst doppelt eingefügt. Dadurch entsteht ein flüssiger Übergang, und
die Animation wirkt wie eine Endlosschleife ohne sichtbares Zurückspringen.

html

.scroll-container {
border: 1px solid #ccc;

1px gibt die Rahmenstärke in Pixeln an.
solid legt den Linienstil des Rahmens fest.
Den Stil bestimmst Du mit Wörtern wie solid, dashed, dotted usw.
#ccc ändere die Farbe des Rahmens.

Das war's auch schon von mir. 😊
Verfasst am 13.April 007, aktualisiert am 12.Juli 2025

>Web-Coding Tutorials<

>Home<