# How to make a scrolling text effect with CSS and JavaScript

I added this effect to [my website](https://sebastianogirotto.me) and here's how I did it

![](https://i.imgur.com/ZoEJR4D.gif align="center")

the HTML is really simple

```xml
<div class="scrolling">
    <p>i like</p>
    <p id="element">CSS</p>
</div>
```

and for the CSS part, we have this

```css
@keyframes scroll {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    20% {
        transform: translateY(0px);
        opacity: 1;
    }

    80% {
        transform: translateY(0px);
        opacity: 1;
    }

    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.scrolling {
  margin-top: 20px;
  display: flex;
  gap: 4px;
}
 
#element {
  width: 30px;
  animation: scroll 4s ease-in-out infinite;
}

#element span {
  font-size: 14px;
  color: black;
  padding: 2px;
  border-radius: 3px;
}
```

this will create the text part that is supposed to scroll to an infinite loop without changing its value. We're gonna make the text change using JavaScript

```javascript
const element = document.getElementById("element");
const words = [
    "JavaScript",
    "TypeScript",
    "Python",
    "HTML",
    "SQL",
    "CSS",
    "Svelte",
    "React",
];

let currentWord = 0;

element.addEventListener(
    "animationiteration",
    () => {
        currentWord++;
        if (currentWord === words.length) currentWord = 0;
        element.innerHTML = words[currentWord];
    },
    false
);
```

you should end up with something like this

![](https://i.imgur.com/I3wzE0L.gif align="center")

you can now customize it using CSS however you want.

Here is a repl with the code

%[https://replit.com/@ssebastianoo/scrolling-text-animation]