How Do I Make Text In The Middle Of A Sentence Scroll?

Contents hide

1 How do I make text in the middle of a sentence scroll?

Problem Description:

I wanted to make a landing page for fun, and see how to make it look better, and I figured that I could make a sentence with spinning text in the middle. I’ve added a GIF to let you guys see what I want it to look like. I did see another post on here similar to mine, but the person that replied had it messed up slightly

I tried using CSS scrolling text, but that made the entire sentence start moving. I tried putting the beginning and end in different DIVs but then they were all seperated.

Solution – 1

It needs to be independent element but you can inline-block it. Within this also overflow:hidden element will be a bigger element to be scrolled inside.

h1 {
  display: flex;
  height: 40px;
  
  /* to center: */
  justify-content: center;
}

.scroll-container {
  text-align: center;
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 40px;
  /* border: 1px solid red; */
  margin-left: 10px;
  margin-right: 10px;
}

.text-inside .item {
  height: 40px;
}

.text-inside {
  margin-top: 0;
  transition: 500ms;
  animation: 3s infinite test;
}

@keyframes test {
  0% {
    margin-top: 0;
  }
  25% {
    margin-top: 0;
  }
  50% {
    margin-top: -40px;
  }
  100% {
    margin-top: -80px;
  }
}

<div style="inline-block">
<h1>Welcome to
  <div class="scroll-container">
    <div class="text-inside">
      <div class="item">Paris</div>
      <div class="item">Frankfurt</div>
      <div class="item">Milano</div>
    </div>
  </div>, Joshua
</h1>

Rate this post