Sliding Text Endless Loop | Startpunkt Anfang (Links)

Helene13 · 27. Juli 2020

Liebes Forum, habe folgendes kleines Problem.

Ich habe es geschafft dass ein X-beliebiger Text in einer Dauerschleife durchs Bild wandert.

Ist es möglich, dass der Text durchs Bild (von links nach rechts) läuft und dann aber am start wieder beginnt?

Quasi:

Text -> fährt nach rechts.

Verlässt Bild auf der rechten Seite und kommt danach (wenn vollständig rechts aus dem Bild verschwunden) wieder von LINKS (startpunkt) ins Bild.

https://codepen.io/Stefane9811/pen/ExPJRLK

HTML

<div..>

CSS

Code

.xy {
    bottom:15%;
    position:absolute;
    -webkit-animation:linear infinite;
    -webkit-animation-name: run;
    -webkit-animation-duration: 2s;
    animation-direction: alternate;

}     
@-webkit-keyframes run {
    0% { left: 0;}
    50%{ left : 100%;}
    100%{ left: 0;}
}

Alles anzeigen

jonas3344 · 27. Juli 2020

Code

.xy {
    bottom:15%;
    position:absolute;
    -webkit-animation:linear infinite;
    -webkit-animation-name: run;
    -webkit-animation-duration: 2s;

}     
@-webkit-keyframes run {
    0% { left: 0;}
   100%{ left : 98%;}
}

Alles anzeigen

Bei left: 100% erscheint kurz eine Scrollbar, daher 98%. Müsste man aber noch etwas austüfteln, was da der optimale Wert ist, vielleicht auch abhängig vom Text resp. der Länge des Texts.

basti1012 · 27. Juli 2020

Zitat von jonas3344

Bei left: 100% erscheint kurz eine Scrollbar, daher 98%

Warum nicht so

Code

body{
  overflow:hidden;
}
.xy {
    bottom:15%;
    position:absolute;
    animation:run linear infinite 12s;
}     
@keyframes run {
    0% { left: 0;}
   100%{ left : 100%;}
}

Alles anzeigen

Helene13 · 27. Juli 2020

Vielen Lieben dank euch beiden! LG

Sliding Text Endless Loop | Startpunkt Anfang (Links)

Jetzt mitmachen!

Teilen