Mehrere Texte nebeneinander „im Kreis fahrend“

Hallöchen, ich wollte euch fragen, ob ihr zufällig wisst, wie sich so etwas umsetzen lässt. http://www.basili.co - gemeint ist die Anfangsanimation Anm.: nur am Handy/Mobile Version sichtbar. Und dann noch weiter unten die fahrenden Schriften die sich von links nach rechts im Kreis bewegen. („our Work“ „Get in Touch“) Anm.: auf dem Handy & Desktop sichtbar Ich hab diesbezüglich schon ein wenig recherchiert, leider nicht wirklich fündig geworden. Liebe Grüße

Der hier verwendete Code

<style> *{ margin:0; padding:0; } #mbox{ width: 100vw; overflow: hidden; white-space: nowrap; color:black; } #mbox div{ display:block; opacity: 0.2; font-size: 50px; font-weight:700; font-family: sailec,Helvetica,sans-serif; position: relative; } .left{ animation: marquee_left1 20s linear forwards infinite; left:-100vw; text-align:left; } .right{ animation: marquee_right1 20s linear forwards infinite; text-align:right; right:-100vw; } .marquee:hover span { color:black; opacity:0.2; } #mbox div:nth-child(1) { animation-delay: 0s; } #mbox div:nth-child(2) { animation-delay: 0.8s; } #mbox div:nth-child(3) { animation-delay: 1.6s; } #mbox div:nth-child(4) { animation-delay: 2.4s; } #mbox div:nth-child(5) { animation-delay: 3.2s; } #mbox div:nth-child(6) { animation-delay: 4.0s; } #mbox div:nth-child(7) { animation-delay: 4.8s; } @keyframes marquee_left { 0% { left: 100vw; } 100% { left: -100vw; } } @keyframes marquee_right { 0% { right: 100vw; } 100% { right: -100vw; } } /*ODER HIN UND HER*/ @keyframes marquee_left1 { 0%{ left: 100vw; text-align:left; } 49%{ text-align:left; } 50%{ left:-100vw; text-align:right; } 100% { left: 100vw; text-align:right; } } @keyframes marquee_right1 { 0%{ right: 100vw; text-align:right; } 49%{ text-align:right; } 50%{ right:-100vw; text-align:left; } 100% { right: 100vw; text-align:left; } } </style> <a href="www.google.at"> <div id="mbox"> <div class="left">Our works</div> <div class="right">Our works</div> <div class="left">Our works</div> <div class="right">Our works</div> <div class="left">Our works</div> <div class="right">Our works</div> <div class="left">Our works</div> </div> <a/>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!