The text scrollbar is made with CSS and a little js in order to initiate CSS animation.
My work in summary.
To place the items one after another, I set them to inline-block.Next, I added display flex to the parent and wrapped it with nowrap.Then I use transform's translateX property to push items offscreen.
Items will be move from one side to another side by translateX property and that property is used in css animation.
Speed can be modifed by animation duration. Also has more control.
In js,
I just got the max scroll with of items container.
So, you can imagine here nothing is running repeatedly.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrollbar</title>
<link rel="stylesheet" href="./style.css">
<script src="./script.js" defer></script>
</head>
<body>
<!-- scrollbar container -->
<div class="scrollbar-container">
<!-- scrollbar message -->
<div class="scrollbar-message-section">
<span class="scrollbar-message-text">Update</span>
</div>
<!-- scrollbar wrapper -->
<div class="scrollbar-wrapper">
<!-- Items -->
<a href="#" class="scrollbar-item">Hey</a>
<a href="#" class="scrollbar-item">Hello</a>
<a href="#" class="scrollbar-item">This is a message</a>
<p class="scrollbar-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. A ullam laborum accusantium, provident
temporibus optio iusto velit, autem sequi odio est nam soluta ipsa perferendis repellendus quia enim
laudantium eligendi.</p>
<a href="#" class="scrollbar-item">Demo link </a>
<a href="#" class="scrollbar-item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae
omnis pariatur excepturi, deleniti neque doloribus aliquam quia nostrum nemo corporis porro ad modi?
Cupiditate, laboriosam veniam ab praesentium illum nam.</a>
<a href="#" class="scrollbar-item">Demo item</a>
</div>
</div>
</body>
</html>
CSS
/* ! Variable will be added by javascript */
:root {
--scrollbar-move-left-start: 100%;
--scrollbar-move-right-end: 100%;
}
/* Move left animation */
@keyframes scrollbarMoveLeft {
0% {
transform: translateX(var(--scrollbar-move-left-start));
}
100% {
transform: translateX(var(--scrollbar-move-left-end));
}
}
/* Move left animation */
@keyframes scrollbarMoveRight {
0% {
transform: translateX(var(--scrollbar-move-right-start));
}
100% {
transform: translateX(var(--scrollbar-move-right-end));
}
}
/* Main Container */
.scrollbar-container {
background-color: yellow;
overflow: hidden;
position: relative;
}
/* Message section */
.scrollbar-container .scrollbar-message-section {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: auto;
background-color: red;
z-index: 10;
}
/* Message text */
.scrollbar-container .scrollbar-message-section .scrollbar-message-text {
color: white;
font-size: 2rem;
font-weight: bolder;
letter-spacing: 0.2ch;
padding: 1rem;
}
/* Wrapper */
.scrollbar-container .scrollbar-wrapper {
display: flex;
flex-wrap: nowrap;
align-items: baseline;
flex-direction: row;
gap: 1rem;
animation: scrollbarMoveLeft var(--scrollbar-animation-time) infinite linear;
animation-direction: normal;
animation-delay: 0;
animation-play-state: running;
}
/*
* What happen on hover item
*/
.scrollbar-container .scrollbar-wrapper:hover {
animation-play-state: paused;
}
/* item */
.scrollbar-container .scrollbar-wrapper .scrollbar-item {
color: black;
display: inline-block;
font-size: 1.3rem;
font-weight: normal;
letter-spacing: normal;
line-height: 1rem;
white-space: nowrap;
margin: 0;
padding-top: 1rem;
padding-bottom: 1rem;
text-decoration: none;
}
JS
/**
* Generate animation time
* @param {number} content_width width in px
* @param {number} speed
* @return {number} animation seconds
*/
function generateAnimationSeconds(content_width, speed) {
// Multiply speed by 10
let modifiedSpeed = parseInt(speed * 100);
// Generate seconds
let seconds = Math.round(content_width / modifiedSpeed);
return seconds;
}
/**
* Set property on document
* @param {String} property name
* @param {*} property value
*/
function setPropertyOnDocument(property_name, property_value) {
document.documentElement.style.setProperty(property_name, property_value);
}
// Get wrapper
const scrollbarWrapper = document.querySelector('.scrollbar-wrapper');
// Generate seconds
const animationSeconds = generateAnimationSeconds(scrollbarWrapper.scrollWidth, 0.4);
// Set animation time
setPropertyOnDocument('--scrollbar-animation-time', `${animationSeconds}s`);
// Set position
setPropertyOnDocument('--scrollbar-move-left-end', `-${scrollbarWrapper.scrollWidth}px`);
setPropertyOnDocument('--scrollbar-move-right-start', `-${scrollbarWrapper.scrollWidth}px`);
In github repo documentation was added to modify scrollbar.
Repo
Top comments (0)