Text scrolling

Scroll elements with css animation. JavaScript is only used for initiate the animation. This scrollbar works without affecting the site performance. Click on the star to reach more people

Demo

Change text direction

Change animation name scrollbarMoveLeft to scrollbarMoveRight in style.css

/* Wrapper */
.scrollbar-container .scrollbar-wrapper {
  //...
  animation: scrollbarMoveLeft var(--scrollbar-animation-time) infinite linear;
  // ...
}

TO

/* Wrapper */
.scrollbar-container .scrollbar-wrapper {
  //...
  animation: scrollbarMoveRight var(--scrollbar-animation-time) infinite linear;
  // ...
}

Change heading position

Flip values of left and right in style.css

/* Message section */
.scrollbar-container .scrollbar-message-section {
  //...
  left: 0;
  right: auto;
  // ...
}

TO

/* Message section */
.scrollbar-container .scrollbar-message-section {
  //...
  left: auto;
  right: 0;
  // ...
}

Change speed

change speed in script.js file

// Scrolling speed
const speed = 0.5;

Handle hover state

what will happen when user hover over a scrolling item

Paused

/* 
* What happen on hover item
*/
.scrollbar-container .scrollbar-wrapper:hover {
  animation-play-state: paused;
}

Running

/* 
* What happen on hover item
*/
.scrollbar-container .scrollbar-wrapper:hover {
  animation-play-state: running;
}