How can I animate a text to seamlessly scroll horizontally on my website?

Onuoha UI 0
Viewed 50

I am working on my coming soon website and I am lost here.

I want to make the page scroll from seamlessly from right to left and a readable pace, but I can't seem to get it to work.

*,
*::after,
*::before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  --color-text: #dedede;
  --color-bg: #060606;
  color: var(--color-text);
  background-color: var(--color-bg);
}

.hero {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10vh 0 25vh;
  --marquee-width: 100vw;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
  --item-font-size: 8vw;
  counter-reset: hero;
}

.marquee {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--marquee-width);
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: normal;
}

.marquee__inner {
  width: fit-content;
  display: flex;
  position: relative;
  transform: translate3d(var(--move-initial), -0, 0);
  animation: marquee 5s linear infinite;
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 0.1s;
}

.marquee .marquee__inner {
  animation-play-state: running;
  opacity: 1;
  transition-duration: 0.4s;
}

.marquee span {
  text-align: center;
  white-space: nowrap;
  font-size: var(--item-font-size);
  padding: 0 1vw;
  font-weight: 900;
  line-height: 1.15;
  font-style: regular;
  color: #FFFB00;
}

@keyframes marquee {
  0% {
    transform: translate3d(var(--move-initial), 0, 0);
  }
  100% {
    transform: translate3d(var(--move-final), 0, 0);
  }
<div>
  <nav class="hero">
    <div class="hero__item">
      <div class="marquee">
        <div class="marquee__inner" style="--tw: 189ch; --ad: 12s;">
          <span>Logo Design • Brand Identity • Illustration • Icon Design • UX/UI • Logo Design
              </span>
        </div>
      </div>
    </div>
  </nav>
</div>

I have tried to adjust the keyframe, and animation marquee, but I am not sure why is is not scrolling with breaks.

Here is the code on CodePenhttps://codepen.io/onuohaui/details/JjvNyaJ

Thank you in advance.

frontend css html
2 Answers

for this slider to work you need to know the exact size of width. here is my version of the slider

 :root {
         --eachWidth: 250px;
         --item-font-size: 3vw;
      }

      body {
         display: grid;
         place-items: center;
         min-height: 100vh;
      }

      .slider {
         height: 200px;
         /* container width */
         width: 90%;
         position: relative;
         margin: auto;
         overflow: hidden;
         display: grid;
         place-items: center;
      }

      .slide-track {
         display: flex;
         /* slide track width = total number of slides 9*2 = 18 * individual width (250px) */
         width: calc(var(--eachWidth) * 18);
         background-color: red;
         /* control the speed */
         animation: scroll 20S linear infinite;
      }

      /*
        .slide-track:hover {
            animation-play-state: paused;
        }
      */
      @keyframes scroll {
         0% {
            transform: translateX(0)
         }

         100% {
            transform: translateX(calc(var(--eachWidth) *9 *-1))
         }
      }

      .slide {
         height: 100px;
         width: var(--eachWidth);
         display: flex;
         align-items: center;
         padding: 15px;
         font-size: var(--item-font-size);
         padding: 0 1vw;
         font-weight: 900;
         line-height: 1.15;
         font-style: regular;
         color: #FFFB00;
      }
 <div class="slider">
      <div class="slide-track" id="slideTrack">
         <div class="slide">text 1</div>
         <div class="slide">text 2</div>
         <div class="slide">text 3</div>
         <div class="slide">text 4</div>
         <div class="slide">text 5</div>
         <div class="slide">text 6</div>
         <div class="slide">text 7</div>
         <div class="slide">text 8</div>
         <div class="slide">text 9</div>

         <!-- you need to add the same amount again so it appears  seamless -->

         <div class="slide">text 1</div>
         <div class="slide">text 2</div>
         <div class="slide">text 3</div>
         <div class="slide">text 4</div>
         <div class="slide">text 5</div>
         <div class="slide">text 6</div>
         <div class="slide">text 7</div>
         <div class="slide">text 8</div>
         <div class="slide">text 9</div>
      </div>
   </div>

i also recommend that you define all css variables in the (:root)

Arash Seifi0

Your Variables are not working as you intent them to be. I would recommend fixing them or not use at all for a simple task like this..

Changes:translating the text 38% to the right withtranslate: 38%; at the start and moving it back to left 110% withtranslate: -110%; at the end of the animation.

you can easily change your text speed by increasing or decreasing the animation time.

Lower the number faster the speed Higher the number Slower the speed

:root {
  --marquee-width: 100vw;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
  --item-font-size: 8vw;
  --color-text: #dedede;
  --color-bg: #060606;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
}

.hero {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10vh 0 25vh;
  counter-reset: hero;
}

.marquee {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--marquee-width);
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: normal;
}

.marquee__inner {
  width: fit-content;
  display: flex;
  position: relative;
  translate: 38%;
  animation: marquee 11s linear infinite;
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 0.1s;
}

.marquee .marquee__inner {
  animation-play-state: running;
  opacity: 1;
  transition-duration: 0.4s;
}

.marquee span {
  text-align: center;
  white-space: nowrap;
  font-size: var(--item-font-size);
  padding: 0 1vw;
  font-weight: 900;
  line-height: 1.15;
  font-style: regular;
  color: #FFFB00;
}

@keyframes marquee {
  0% {
    translate: 38%;
  }
  100% {
    translate: -110%;
  }
}
<div>
  <nav class="hero">
    <div class="hero__item">
      <div class="marquee">
        <div class="marquee__inner" style="--tw: 189ch; --ad: 12s;">
          <span>Logo Design • Brand Identity • Illustration • Icon Design • UX/UI • Logo Design
                        </span>
        </div>
      </div>
    </div>
  </nav>
</div>

UmairFarooq0
Related