basti1012.bplaced.net

Hallöchen, ich wollte euch fragen, ob ihr zufällig wisst, wie sich so etwas umsetzen lässt. <a href="http://www.basili.co">http://www.basili.co</a> - 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

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