Word Carousel

index.html

<h1>
  Today I am feeling 
<ul class="word-rotate">
  <li>creative</li>
  <li>innovative</li>
  <li>curious</li>
  <li>experimental</li>
  <li>creative</li>
  <li>innovative</li>
  <li>curious</li>
  <li>experimental</li>
</ul>
</h1>

script.babel

const wr = document.querySelector(".word-rotate");

const words = wr.children;

let x = 0;
rotate(x);

setInterval(() => {
  x = ++x % words.length;
  rotate(x);
}, 1000);

function rotate(start) {
  for (let i = 0; i < words.length; ++i) {
    const j = (start + i) % words.length;
    let percent = j / words.length;
    let rad = percent * 2 * Math.PI;
    let ty = Math.sin(rad) * 200;
    let tz = 40 * Math.cos(rad) - 40;
    let op = (Math.cos(rad) + 1) / 2;
    words[
      i
    ].style.transform = `perspective(100px) translateZ(${tz}px) translateY(${ty}%)`;
    words[i].style.opacity = `${op}`;
  }
}

style.scss

@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700");

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #8E24AA;
  color: #fff;
  font-family: 'Inconsolata';
}

.word-rotate {
  list-style-type: none;
  margin: 0;
  padding: 0;
  // border: 1px solid black;
  width: 10em;
  height: 1em;
  position: relative;
  display: inline-block;
  li {
    height: 1em;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.5s;
  }
}

word-carousel.markdown

Word Carousel

A Pen by Austin Dudas on CodePen.

License.