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/>