Infinite Scrolling Rolling Text Effect In Pure CSS

CSS rolling text is a subtle text rolling effect that slides through a series of text using CSS3 animations.

vertical scrolling text generator, scrolling text css codepen, css vertical scrolling text, scrolling text animation, scrolling text in html without marquee, infinite scrolling text css

How to make use of it:

1. Add your text to the roller.

<span id="rolltext">
  HTML<br/>
  CSS<br/>
  No JavaScript<br/>
  ... more text here ...

2. CSS example for a roller.

.roller{
  height: 4.125rem;
  line-height: 4rem;
  position: relative;
  overflow: hidden; 
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1D3557;
}

3. Enable the rotation effect on the text.

.roller #rolltext {
  position: absolute;
  top: 0;
  animation: slide 5s infinite;  
}

@keyframes slide {
  0%{
    top:0;
  }
  25%{
    top: -4rem;    
  }
  50%{
    top: -8rem;
  }
  72.5%{
    top: -12.25rem;
  }
}

Rolling Text Effect In Pure CSS, CSS Rolling Text Plugin/Github, text scroll animation codepen


See Demo And Download

Official Website(cr1m): Click Here

This superior jQuery/javascript plugin is developed by cr1m. For extra Advanced Usage, please go to the official website.

Share