https://github.com/abkarim/scrollbar
Text scrolling with pure css animation
https://github.com/abkarim/scrollbar
css-scrollbar marquee scrollview
Last synced: 8 months ago
JSON representation
Text scrolling with pure css animation
- Host: GitHub
- URL: https://github.com/abkarim/scrollbar
- Owner: abkarim
- License: mit
- Created: 2022-04-26T23:21:18.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-22T23:15:56.000Z (over 3 years ago)
- Last Synced: 2025-08-22T14:54:13.589Z (8 months ago)
- Topics: css-scrollbar, marquee, scrollview
- Language: CSS
- Homepage: https://abkarim.github.io/scrollbar/
- Size: 13.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://karim-scrollbar.netlify.app/)
## Change text direction
Change animation name **scrollbarMoveLeft** to **scrollbarMoveRight** in style.css
```css
/* Wrapper */
.scrollbar-container .scrollbar-wrapper {
//...
animation: scrollbarMoveLeft var(--scrollbar-animation-time) infinite linear;
// ...
}
```
TO
```css
/* 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
```css
/* Message section */
.scrollbar-container .scrollbar-message-section {
//...
left: 0;
right: auto;
// ...
}
```
TO
```css
/* Message section */
.scrollbar-container .scrollbar-message-section {
//...
left: auto;
right: 0;
// ...
}
```
## Change speed
change speed in `script.js` file
```javascript
// Scrolling speed
const speed = 0.5;
```
## Handle hover state
what will happen when user hover over a scrolling item
**Paused**
```css
/*
* What happen on hover item
*/
.scrollbar-container .scrollbar-wrapper:hover {
animation-play-state: paused;
}
```
**Running**
```css
/*
* What happen on hover item
*/
.scrollbar-container .scrollbar-wrapper:hover {
animation-play-state: running;
}
```