CODEWITHSUNDEEP
cssinfinite-loopinfinite
Sebastian Rosas Bruno
Sebastian Rosas Bruno

Reputation: 31

How I can make a div that move on the X axis in a infinite loop?

I want to know how I can make this possible. I want to make an infinite loop slider. But I can't get it to appear on the other side as soon as it starts to cross the right. Any idea, please? Here is how looks nowenter image description here

And this is my code:

<div className='home-container'>
        <div className='slider-top'>
            <img className='top-28866' src={Home28866} 
 alt="Home28866Top1" />
            <img className='top-28866' src={Home28866} 
 alt="Home28866Top2" />
            <img className='top-28866' src={Home28866} 
 alt="Home28866Top3" />
            <img className='top-28866' src={Home28866} 
 alt="Home28866Top4" />
            <img className='top-28866' src={Home28866} 
 alt="Home28866Top5" />
            <img className='top-28866' src={Home28866} 
 alt="Home28866Top6" />
        </div>
    </div>

    .slider-top {
display: flex;
justify-content: space-between;
animation: marquee-mobile 20s infinite cubic-bezier(0.53, 0.47, 1, 1);
width: 100%;
height: 5vw;
padding-top: 3vw;
overflow: hidden;
-webkit-box-pack: start;

}

 @keyframes marquee-mobile {
 0%  {
    -webkit-transform: translateX(0);
    transform: translateX(0);
 }

 100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
 }
 }

Upvotes: 0

Views: 1630

Answers (2)

user7148391
user7148391

Reputation:

You can double up the content

Plain text: 

[container] {
  display: inline-block;
  overflow: hidden;
}

[marquee] {
  position: relative;
  white-space: nowrap;
  padding: 10px;
  animation: t 3s linear infinite;
}

[marquee]:before {
  content: attr(data);
}

[marquee]:after {
  content: attr(data);
  position: absolute;
  left: 100%;
  top: 0;
  padding: inherit;
}

@keyframes t {
  to {
    transform: translateX(-100%);
  }
}
<div container>
  <div marquee data="Lorem Ipsum is simply dummy text of the print">
  </div>
</div>

Markup:

[container] {
    overflow: hidden;
    max-width: 100%;
}

[marquee] {
    display: inline-block;
    position: relative;
    animation: t 10s linear infinite;
}

[content],[dupContent] {
    display: inline-flex;
    white-space: nowrap;
}

[dupContent] {
    position: absolute;
    left: 100%;
    top: 0;
}

@keyframes t {
    to {
        transform: translateX(-100%);
    }
}

[box]:nth-child(1) {
    background: hsla( 0, 100%, 50%, 0.8);
}

[box]:nth-child(2) {
    background: hsla( 40, 100%, 50%, 0.8);
}

[box]:nth-child(3) {
    background: hsla( 80, 100%, 50%, 0.8);
}

[box]:nth-child(4) {
    background: hsla(120, 100%, 50%, 0.8);
}

[box]:nth-child(5) {
    background: hsla(160, 100%, 50%, 0.8);
}

[box]:nth-child(6) {
    background: hsla(200, 100%, 50%, 0.8);
}

[box]:nth-child(7) {
    background: hsla(240, 100%, 50%, 0.8);
}

[box]:nth-child(8) {
    background: hsla(280, 100%, 50%, 0.8);
}

[box]:nth-child(9) {
    background: hsla(320, 100%, 50%, 0.8);
}

[box] {
    padding: 20px;
    font-size: 80px;
    font-weight: bold;
    color: white;
}
<div container>
  <div marquee>
    <div content>
      <div box>1</div>
      <div box>2</div>
      <div box>3</div>
      <div box>4</div>
      <div box>5</div>
      <div box>6</div>
      <div box>7</div>
      <div box>8</div>
      <div box>9</div>
    </div>
    <div dupContent>
      <div box>1</div>
      <div box>2</div>
      <div box>3</div>
      <div box>4</div>
      <div box>5</div>
      <div box>6</div>
      <div box>7</div>
      <div box>8</div>
      <div box>9</div>
    </div>
  </div>
</div>

Note: We're dealing absolute positioning here, So it will need a little bit of care if you're using padding/margin and the such.

Upvotes: 2

TheKittyMaster
TheKittyMaster

Reputation: 1

div {
    width: 50px; /* Changeable*/
  position: relative;
  animation-name: example;
  animation-duration: 2s; /* Changeable */
  animation-iteration-count: infinite; /* Changeable */
  animation-timing-function: linear;
}

/* Everything in @keyframes example{} is changeable */
@keyframes example {
  0%   {left:-20%; top:0px;}
  100% {left:102%; top:0px;}
}
<!DOCTYPE html>
<html>
<head> 

</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div>Placeholder text</div>

</body>
</html>

Is this what you mean? I added "/* Changeable */" labels to anything that you can customize without messing up the animation. You can add your own css as well, of course.

Upvotes: 0

Related Questions