Make a group of element move horizontally to the left-CodePudding

In the following code, I have arranged a few divs to align horizontally. I want to create 3 rows and in each row, I want divs to move horizontally to the left at varying speeds.

Check this giphy for visual reference :

Animated like this (

CodePudding user response：

If you can add copies of the elements to your HTML you can do the rest in CSS.

Each row is treated independently and has at least two copies of the items in that row - put in more (doubling up) if you think the items wont stretch across the full width of the containing block on some devices.

A row moves 50% of its total width to the left, then starts again. This means the action looks smooth as the second half of the row is "overwritten by" the first half when it hits the left hand side of its container.

This snippet uses a CSS variable --t to set the timing, and each of the rows can set its own --t.

Just a couple of rows shown in this snippet to give the idea. Add more as required, each within its own parent div. I've put 4 copies of the items in each row - probably overkill, it depends on your content and what devices you are trying to style for.

.roundeddivs {
  background: white;
  white-space: nowrap;
  padding: 20px 25px;
  border-radius: 44px;
  max-height: "1px";
  width: auto;
  margin: 8px;
  font-size: 18px;
  font-weight: 500;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.block {
  padding: 6rem 2rem;
  width: 50vw;
}

.marquees {
  margin: 0 25px;
  white-space: nowrap;
  overflow: hidden;
}

.marquees>* {
  white-space: nowrap;
  display: flex;
  width: fit-content;
  animation: move var(--d) linear infinite;
}

.marquees>*:nth-child(1) {
  --d: 9s;
}

.marquees>*:nth-child(2) {
  --d: 15s;
}

.marquees>*:nth-child(3) {
  --d: 8s;
}

.marquees>*:nth-child(4) {
  --d: 15ss;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

<section>
  <div >
    <div >
      <div>
        <span >Hello 1</span>
        <span >Hello 2</span>
        <span >Hello 3</span>
        <span >Hello 4</span>
        <span >Hello 5</span>
        <span >Hello 6</span>
        <span >Hello 7</span>
        <span >Hello 8</span>
        <span >Hello 1</span>
        <span >Hello 2</span>
        <span >Hello 3</span>
        <span >Hello 4</span>
        <span >Hello 5</span>
        <span >Hello 6</span>
        <span >Hello 7</span>
        <span >Hello 8</span>
        <span >Hello 1</span>
        <span >Hello 2</span>
        <span >Hello 3</span>
        <span >Hello 4</span>
        <span >Hello 5</span>
        <span >Hello 6</span>
        <span >Hello 7</span>
        <span >Hello 8</span>
        <span >Hello 1</span>
        <span >Hello 2</span>
        <span >Hello 3</span>
        <span >Hello 4</span>
        <span >Hello 5</span>
        <span >Hello 6</span>
        <span >Hello 7</span>
        <span >Hello 8</span>
      </div>
      <div>
        <span >Hello 9</span>
        <span >Hello 10</span>
        <span >Hello 11</span>
        <span >Hello 12</span>
        <span >Hello 13</span>
        <span >Hello 14</span>
        <span >Hello 15</span>
        <span >Hello 16</span>
        <span >Hello 17</span>
        <span >Hello 9</span>
        <span >Hello 10</span>
        <span >Hello 11</span>
        <span >Hello 12</span>
        <span >Hello 13</span>
        <span >Hello 14</span>
        <span >Hello 15</span>
        <span >Hello 16</span>
        <span >Hello 17</span>
        <span >Hello 9</span>
        <span >Hello 10</span>
        <span >Hello 11</span>
        <span >Hello 12</span>
        <span >Hello 13</span>
        <span >Hello 14</span>
        <span >Hello 15</span>
        <span >Hello 16</span>
        <span >Hello 17</span>
        <span >Hello 9</span>
        <span >Hello 10</span>
        <span >Hello 11</span>
        <span >Hello 12</span>
        <span >Hello 13</span>
        <span >Hello 14</span>
        <span >Hello 15</span>
        <span >Hello 16</span>
        <span >Hello 17</span>
      </div>
    </div>
  </div>
</section>

Obviously you will want to play with the timings to get the effect you need.

CodePudding user response：

The easiest way I can think of is to use a marquee tag , however the element wont show up from the right directly .

.marquee{
  width: 100%
}

<section>

<div >
<div >

<marquee scrollamount="6">
  <span >Hello 1</span>
  <span >Hello 2</span>
  <span >Hello 3</span>
  <span >Hello 4</span>
</marquee>

<marquee scrollamount="5">
  <span >Hello 5</span>
  <span >Hello 6</span>
  <span >Hello 7</span>
  <span >Hello 8</span>
</marquee>

<marquee scrollamount="10">
  <span >Hello 9</span>
  <span >Hello 10</span>
  <span >Hello 11</span>
  <span >Hello 12</span>
</marquee>

<marquee scrollamount="8">
  <span >Hello 13</span>
  <span >Hello 14</span>
  <span >Hello 15</span>
  <span >Hello 16</span>
  <span >Hello 17</span>
</marquee>

</div>
</div>
</section>