JSFiddle - React, Tailwind, and code Playground

by Lloyd Atkinson

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
<!-- <div class="box">
  <ul class="industries-list">
    <li>company</li>
    <li>trade</li>
    <li>small business</li>
    <li>personal website</li>
    <li>portfolio</li>
    <li>organisation</li>
    <li>occupation</li>
    <li>club</li>
    <li>community</li>
    <li>shop</li>
    <li>band</li>
    <li>society</li>
  </ul>
</div> -->

<div class="fade"></div>

<section class="star-wars">
  <div class="crawl">
    <ul class="industries-list">
      <li>idea</li>   
      <li>company</li>
      <li>small business</li>
      <li>trade</li>
      <li>personal website</li>
      <li>portfolio</li>
      <li>studio</li>
      <li>organisation</li>
      <li>occupation</li>
      <li>club</li>
      <li>community</li>
      <li>shop</li>
      <li>cafe</li>
      <li>band</li>
      <li>society</li>
    </ul>
  </div>
</section>

hello world

CSS

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  will-change: transform;
}

ul {
  list-style-type: none;
}

/* .fade {
  position: relative;
  width: 100%;
  min-height: 60vh;
  top: -25px;
  background-image: linear-gradient(0deg, transparent, black 75%);
  z-index: 1;
} */

.star-wars {
  display: flex;
  justify-content: center;
  position: relative;
  height: 300px;
  color: #2d3748;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 500%;
  font-weight: 600;
  letter-spacing: 6px;
  line-height: 150%;
  /* perspective: 400px; */
  text-align: justify;
}

.crawl {
  position: relative;
  /* top: 99999px; */
  transform-origin: 50% 100%;
  animation: crawl 30s linear;
  animation-iteration-count: infinite
}



@keyframes crawl {
	0% {
    top: 500px;
/*     transform: rotateX(20deg)  translateZ(0); */
  }
	100% { 
    top: -2000px;
/*     transform: rotateX(25deg) translateZ(-2500px); */
  }
}