DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Text scrolling with css animation
Ab. Karim
Ab. Karim

Posted on

Text scrolling with css animation

The text scrollbar is made with CSS and a little js in order to initiate CSS animation.

repo

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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`);
Enter fullscreen mode Exit fullscreen mode

In github repo documentation was added to modify scrollbar.
Repo

Github profile
My twitter

Top comments (0)

Let's team up together 🀝

We're Hiring

We're hiring for a Senior Full Stack Engineer to join the DEV team. Want the deets? Head here to learn more about who we're looking for.