יצירת טקסט נגלל (אנימציה)

על מנת לייצר טקסט נגלל אופקי, יש להקים אובייקט "Column" ובתוכו לשים את התגית <article> שבה ישובץ התוכן הנגלל בתוך תגית <p>, עם ה-Class של scroll-right, לדוגמא כך:

<article>
   <p class="scroll-right">Aketipo<span class="spacer"></span>Alivar<span class="spacer"></span>Amini<span class="spacer"></span>B&B<span class="spacer"></span><span class="spacer"></span>Vipp</p>
</article>

יש להפעיל את ה-CSS הבא כדי לייצר את אפקט הגלילה:

article {
  max-width:100%;
  overflow: hidden;
  position: relative;
  min-height: 4em;
}
.scroll-right {
  -webkit-animation: urmove 8s linear infinite; /* Safari 4.0 - 8.0 */
  white-space: nowrap;
  animation: urmove 30s linear infinite alternate;
  line-height:35px !important;
}
.scroll-right {
  white-space: nowrap;
  position: absolute;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes urmove {
  from {
    right: 0;
  }
  to {
    right: -800px;
  }
}
@keyframes urmove {
  from {
    right: 0;
  }
  to {
    right: -800px;
  }
}

כאשר יש לשנות את מרווח הגלילה מ-800 לרלוונטי, ולהגדיר את זמן האנימציה לפי מה שמתאים לאורך הטקסט הנגלל.