JavaScript landing page (PART4): make marquees infinite + checkbox

[Valery_04]

Hi! Valery here again and I want to put a checkbox in the wrapper of the landing section of my index.html to quit the harsch of seeing it again when coming to the page, and make my CSS marquees look a lot like the HTML tag (go round and round infinitely instead of start from the 0% again when reaching to the 100%)

My homepage

Please, it would be helpful for many new coders.

[LIQUIDCULT]

Ohhh I am seconding the marquee thing except for vertical!

[Valery_04]

Solved! I let the code for anyone who wants it (adjust '-350' according to a single marquee length, do not edit if using multiple marquees like me)

Code

.marquee {
  display: flex;
  width: auto;
  white-space: nowrap;
  box-sizing: border-box;
  width: 100%;
  animation: marquee 25s linear infinite;
  display: inline-block;
  padding-right: 10px;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% { 
    transform: translateX(-350%);
  }
  -350% {
    transform: translateX(0%);
  }
}