Laufband Container

RLloher · 10.11.2023

Hallo,
ich bin ein newbie hier und hab ein problem mit einem laufbandcontainer. wenn ich den beigefügten code in meiner shop-startseite einfüge, dann verschwindet der "scroll-balken" rechts sowohl bei safari-browser als auch bei google-chrome. das heißt man kann dann nicht mehr auf der seite nach unten scrollen. auch mit den Pfeiltasten kommt man nicht nach unten. kann mir eventuell jemand helfen?

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {

margin: 0;

overflow: hidden;

}

.laufcontainer {

width: 100%;

white-space: nowrap;

animation: scroll 10s linear infinite;

}

.laufcontainer a {

text-decoration: none; /* Entfernt die Standardunterstreichung von Links */

color: inherit; /* Verwendet die Standardtextfarbe */

}

.laufcontainer .image {

display: inline-block;

width: 1340px;

height: 200px;

background-image: url('dein-bild.jpg');

background-size: cover;

}

@keyframes scroll {

0% { transform: translateX(100%); }

100% { transform: translateX(-100%); }

}

</style>

</head>

<body>

<div class="laufcontainer">

<a href="dein-link-url" class="image"></a>

</div>

</body>

</html>

Sempervivum · 10.11.2023

Das liegt an diesem CSS:

Code:

overflow: hidden;

Dadurch wird das, was über das Browserfenster hinaus geht, einfach abgeschnitten und die Scrollbars verschwinden.

RLloher · 10.11.2023

ok, herzlichen dank für die superschnelle antwort, hast Du auch noch eine lösung für mich? einfach den overflow weglassen?

Sempervivum · 10.11.2023

Auf jeden Fall erst Mal weg lassen. Kann dann unerwünschte Auswirkungen auf das Laufband haben aber dann müsste man es im Zusammenhang sehen.

RLloher · 10.11.2023

werd ich versuchen , nochmal herzlichen dank an den Frühaufsteher

RLloher · 10.11.2023

Das hat wunderbar funktioniert, danke nochmal.
Eine weitere frage hat sich ergeben: Wie stellt man das ein, damit am bildende sofort das bild nochmal kommt, also eine bild-dauerschleife ohne sichtbare Unterbrechung ? hat da jemand vielleicht noch einen hinweis?

Sempervivum · 10.11.2023

Versuche das CSS so zu ändern:

Code:

        .laufcontainer .image {

            display: inline-block;

            /* Das Bild wird verdoppelt aber es soll nur ein Mal sichtbar sein.
            Dazu setzen wir die Breite des Containers auf 200%. */
            width: 200%;

            height: 200px;

            background-image: url('images/busleft.png');

            /* Das Bild muss verdoppelt werden, das tut der Browser automatisch
            wenn wir die Breite auf 50% des Containers setzen. */
            background-size: 50% auto;

        }



        @keyframes scroll {

            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-100%);
            }

        }

(Da habe ich ein eigenes Bild zum Testen genommen, musst Du ändern.)
Der Rest darüber bleibt so.
Das ist jetzt ein wenig ein Schnellschuss und verbesserungsfähig: Wünschenswert wäre, dass sich die Höhe automatisch anpasst, so dass das Bild vollständig sichtbar ist. Aber ich belasse es zunächst mal so.

RLloher · 10.11.2023

danke für deine mühe, ja, durch diese änderungen verdoppelt er das bild auch untereinander. da muss ich mich wohl noch richtig reinfuchsen. aber so lernt man ja dazu

Sempervivum · 10.11.2023

Bei mir hat es funktioniert, nicht untereinander.
Wenn Du einen Shop hast, hast Du ja auch Webspace, dann wäre es am besten, wenn Du es online stellen kannst, damit man es mit dem Seiteninspektor untersuchen kann.

RLloher · 10.11.2023

humidorado.de ich hab das Laufband auf der startseite aktiv ganz unten (damit das jetzt noch nicht soviel Leute live sehen

) das läuft jetzt grad noch nicht fließend, hab die höhe auf flex gesetzt

RLloher · 10.11.2023

aber wenn man das "ruckeln" in kauf nimmt ist es denk ich ganz ordentlich

RLloher · 10.11.2023

stell aber gerade fest dass es bei kleineren Bildschirmen bzw. mobile nicht so gut klappt

Sempervivum · 10.11.2023

Bei mir ruckelt überhaupt nichts, die Animation läuft vollkommen flüssig. Ist dein Browser vielleicht irgend wie überlastet? Normaler Weise sind Animationen mit CSS von der Performance her am günstigsten.

Ich habe das auf humidorado.de mal mit dem Seiteninspektor überarbeitet und danach lief das Ganze für meine Begriffe einwandfrei:

Nicht den ganzen Container .laufcontainer animiert sondern das a-href darin:

Code:

.laufcontainer .image {
    display: inline-block;
    width: 200%;
    height: 180px;
    background-image: url(https://humidorado.de/images/laufband-skelton-live-your-dreams-gordo.jpg);
    background-size: 50%;
    animation: scroll 15s linear infinite;
    background-repeat: repeat-x;
}

Damit keine Lücken sichtbar werden, overflow:hidden; für den .laufcontainer

Bei der Animation darf man das .image nur bis -50% laufen lassen, sonst entsteht eine Lücke:

Code:

0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-50%);
}

Ich hoffe, ich habe nichts vergessen, versuche es Mal so.

RLloher · 10.11.2023

hallo,

ja jetzt klappt's, vielen dank nochmal. ich denke die -50% Habens ausgemacht bei der animation