CODEWITHSUNDEEP
javascriptcssanimation
blasta bam
blasta bam

Reputation: 83

CSS infinite scrolling div

Hi i am trying to make the div to scroll with a simple css animation.

The problem is that it doesn't loop good, because there is a little flash before to restart scrolling.

HERE IS THE CODE: https://jsfiddle.net/by6tx4o0/2/

.c{
  position:relative;
  background:red;
  max-height:200px;
  float:left;
  width:300px;
  height:300px;
  overflow:hidden;
  overflow-y:auto;
}
.card-home{
  position:absolute;
  margin:20px;
	top:0;
  	animation: scroll 10s linear 1s infinite;
}
span {
  min-width:300px;
  min-height:40px;
  display:block;
  color:white;
  margin:5px;
  background:blue;
}
@keyframes scroll {
	100% { top: -100%; }
}
<div class="c">sssss
<div class="card-home">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
</div>
</div>

What do i have to do to make this smooth when looping?

thank you

Upvotes: 5

Views: 38895

Answers (2)

Pete
Pete

Reputation: 58432

Hmmm a tricky one and will need a few hard coded values if you want it to be pure css but here is the gist of it:

.c{
  position:relative;
  background:red;
  max-height:225px;  /*height to show an exact number of spans  - in this case span is 45px (40 height plus 5 margin as margins collapse) and we are showing 5 spans to start */
  float:left;
  width:315px;
  height:225px;
  overflow:hidden;
  overflow-y:auto;
}
.card-home{
  position:absolute;
	top:0;
  	animation: scroll 10s linear 1s infinite;
}
span {
  min-width:290px;
  min-height:40px;
  display:block;
  color:white;
  margin:5px;
  background:blue;
}
@keyframes scroll {
	100% { top: -360px; }  /* top is the number of spans (in this case 8) multiplied by span height (45px as described above)*/
}
<div class="c">
<div class="card-home">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <!-- copy the number of spans displayed at the beggining onto the end -->
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>
</div>

Also I would move that ssss text outside the scroller so that the top 20px margin you started with doesn't interfere with the scroller

Upvotes: 15

Alvaro Montoro
Alvaro Montoro

Reputation: 29655

If you want to have it scrolling smoothly to the top once the animation is complete, one thing that you could do is just modify a little bit your animation, so instead of finishing at the bottom, it finishes at the top (that is the original state so there won't be any "jump" when the animation restarts).

You can do this by:

  • Scrolling to the bottom using 95% of the animation time.
  • Using the 5% remaining to scroll up.

The code changes would be really simple, and it would not require any JavaScript:

@keyframes scroll {
    95% { top: -100%; }
    100% { top:0; }
}

This demo shows the result:

.c{
  position:relative;
  background:red;
  max-height:200px;
  float:left;
  width:300px;
  height:300px;
  overflow:hidden;
  overflow-y:auto;
}
.card-home{
  position:absolute;
  margin:20px;
  top:0;
  animation: scroll 10s linear 1s infinite;
}
span {
  min-width:300px;
  min-height:40px;
  display:block;
  color:white;
  margin:5px;
  background:blue;
}
@keyframes scroll {
  95% { top: -100%; }
  100% { top:0; }
}
<div class="c">sssss
<div class="card-home">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
</div>
</div>

Upvotes: 4

Related Questions