How To Create A Horizontal Scrolling Component That Loops Seamlessly

Creating fun and interesting components on your website can help keep users engaged in the content and allows you to convey information in unique ways. On our homepage, I created a component that scrolls through logos of many of the clients we have worked with.

How It’s Done

This can be done using just HTML and CSS and is very simple. No JavaScript required!

Start by creating a container div and adding some styling. I will make it a flex display so the child elements will line up in a row. And since I’m using text as my scrolling item, I’m setting a font size of 40px. Note that you can use other content as scrolling items, such as images.

<div class="horizontal-scrolling-items"></div>

<style>
.horizontal-scrolling-items {
  display: flex;
  font-size: 40px; 
}
</style>

Next, I will add the scrolling items. The key here is to make two identical divs. This will allow it to loop smoothly. Add whatever text you want in these divs, just make sure they are identical. I included ‘&nbsp’ at the end of the items as that adds a space at the end of the line. And, since we don’t want the text wrapping, we will add white-space: nowrap; to the styling.

<div class="horizontal-scrolling-items__item">
Here is some horizontally scrolling text used for a tutorial. It will loop smoothly.&nbsp
</div>

<div class="horizontal-scrolling-items__item">
Here is some horizontally scrolling text used for a tutorial. It will loop smoothly.&nbsp
</div>

<style>
.horizontal-scrolling-items__item {
  white-space: nowrap;
}
</style>

Now that we have the divs and their styling, let’s add the animation!

<style>
@keyframes infiniteScroll {
  from {transform: translateX(0) }
  to {transform: translateX(calc(0px - 50%));}
}
.horizontal-scrolling-items {
  animation-name: infiniteScroll;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
</style>

Here’s How it Looks!

See the Pen Untitled by Full Circle Design Studio (@fullcircledesign) on CodePen.

Troubleshooting

If your text isn’t long enough to fill the entire screen, just copy and paste! It still only takes two divs. For example, if you have this:

<div class="horizontal-scrolling-items__item">
This is a short line of text.&nbsp
</div>

<div class="horizontal-scrolling-items__item">
This is a short line of text.&nbsp
</div>

Turn it into this:

<div class="horizontal-scrolling-items__item">
This is a short line of text. This is a short line of text. This is a short line of text.&nbsp
</div>

<div class="horizontal-scrolling-items__item">
This is a short line of text. This is a short line of text. This is a short line of text.&nbsp
</div>

Using Images Instead of Text

Using the same framework as before, I will make the following additions to the styling:

<style>
@keyframes infiniteScroll {
  from {transform: translateX(0) }
  to {transform: translateX(calc(0px - 50% - 25px));}
}

.horizontal-scrolling-items {
  height: 200px;
  gap: 50px;
}

.horizontal-scrolling-items__item {
  height: 100%;
  width: 200px;
  background-size: cover;
}
</style>

The final negative value in the translateX of the keyframes is set to half the value of the gap declared in your scrolling items container. Again, this is to ensure it loops smoothly. We now need to set height, width, and background-size as we will be using background-image on our scrolling items.

Now let’s add the content! I will be using five different pictures of fruit. Notice how I am using classes from item1 to item5 then making an exact copy of those divs, just as we did for the text example.

<div class="horizontal-scrolling-items">
  <div class="horizontal-scrolling-items__item item1"></div>
  <div class="horizontal-scrolling-items__item item2"></div>
  <div class="horizontal-scrolling-items__item item3"></div>
  <div class="horizontal-scrolling-items__item item4"></div>
  <div class="horizontal-scrolling-items__item item5"></div>
  <div class="horizontal-scrolling-items__item item1"></div>
  <div class="horizontal-scrolling-items__item item2"></div>
  <div class="horizontal-scrolling-items__item item3"></div>
  <div class="horizontal-scrolling-items__item item4"></div>
  <div class="horizontal-scrolling-items__item item5"></div>
</div>

And here is the styling. Add the images you would like here.

<style>
.item1 {
  background-image: url("assets/tutorial/apple.jpg");
}

.item2 {
  background-image: url("assets/tutorial/strawberry.jpg");
}

.item3 {
  background-image: url("assets/tutorial/pears.jpg");
}

.item4 {
  background-image: url("assets/tutorial/kiwi.jpg");
}

.item5 {
  background-image: url("assets/tutorial/cherry.jpg");
}
</style>

You might be wondering why I used background images on a <div> instead of just <img src=”…”>. Because we will be repeating the same images, we don’t want the client side to have to download multiple copies of the same thing. Using background-image is intended to eliminate this problem.

Here’s the final product:

You can also visit our homepage to see how we implemented this type of component on our own site. Thank you for reading!