Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Hac habitasse platea dictumst vestibulum rhoncus est. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Mauris pellentesque pulvinar pellentesque habitant morbi tristique.

Infinite flips without the js

Code Sample

2 classes, 5 css keyframes, that’s all it takes anymore. 🤯 Check out the code sample below, feel free to copy and paste…maybe I’ll get around to putting these into a GitHub repo or something. Stay tuned.

<div class="roller">
   <span class="roller__text">
      <h1>front end developer</h1><br />
      <h1>a typography lover</h1><br />
      <h1>a friend of droids</h1><br />
      <h1>marketing professional</h1><br />
      <h1>marketing professional</h1><br />
   </span>
</div>

<style>
.roller{
  height: 4.125em;
  line-height: 4em;
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  &__text{
    position: absolute;
    top: 0;
    animation: slide 15s infinite;
  }
}

@keyframes slide {
  0% {
    top: 0;
  }
  25% {
    top: -4rem;
  }
  50% {
    top: -8rem;
  }
  72% {
    top: -20.25rem;
  }
  100% {
    top: -30.25rem;
  }
}
</style>

Consectetur lorem donec massa sapien faucibus. Id faucibus nisl tincidunt eget nullam non nisi est. Tellus at urna condimentum mattis pellentesque id nibh. Purus in massa tempor nec. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Id nibh tortor id aliquet. Nec ullamcorper sit amet risus nullam eget felis. Vel facilisis volutpat est velit egestas dui id ornare.

Another Code Sample

Another Code Sample

Velit ut tortor pretium viverra suspendisse potenti nullam. Arcu vitae elementum curabitur vitae nunc sed velit dignissim sodales. Nisi lacus sed viverra tellus in hac.

Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Aliquam id diam maecenas ultricies. Vitae justo eget magna fermentum. Lobortis elementum nibh tellus molestie nunc non. Cras ornare arcu dui vivamus arcu felis bibendum. Accumsan lacus vel facilisis volutpat est velit egestas. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Tellus molestie nunc non blandit. Congue eu consequat ac felis donec.

Lectus nulla at volutpat diam ut venenatis tellus in metus. Turpis nunc eget lorem dolor sed. Nibh nisl condimentum id venenatis a condimentum.