جافاسكريبت - CSS لتظليل التمرير اللانهائي في div

مرحبًا، أنا أحاول جعل الـ div يتحرك بالتمرير باستخدام تحريك CSS بسيط.

المشكلة هي أنه لا يدور بشكل جيد، لأنه هناك وميض صغير قبل إعادة بدء التمرير.

إليك الكود: 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>

ماذا علي أن أفعل لجعل هذا سلسًا عند التكرار؟

شكراً لك

الإجابة رقم 1

هممم، هذا صعب بعض الشيء وسيحتاج إلى بعض القيم الثابتة إذا كنت تريد أن يكون CSS نقيًا، لكن هذه هي الفكرة الأساسية:

.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>

كما أنني أقترح نقل نص ssss خارج منطقة التمرير بحيث لا تتداخل الهوامش العلوية بمقدار 20 بكسل التي بدأت بها مع منطقة التمرير

الإجابة رقم 2

إذا كنت تريد أن يتحرك بسلاسة إلى الأعلى بمجرد اكتمال الرسوم المتحركة، فإن إحدى الأشياء التي يمكنك القيام بها هي تعديل رسومك المتحركة قليلاً، بحيث بدلاً من الانتهاء في الأسفل، تنتهي في الأعلى (وهذا هو الحالة الأصلية حتى لا يكون هناك أي "قفز" عند إعادة تشغيل الرسوم المتحركة).

يمكنك القيام بذلك عن طريق:

• التمرير إلى الأسفل باستخدام 95% من وقت الحركة.
• استخدام الـ 5٪ المتبقية للتمرير للأعلى.

تغييرات الكود ستكون بسيطة جداً، ولن تتطلب أي جافا سكريبت:

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

يعرض هذا العرض التجريبي النتيجة:

.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>