Rotating Circular Text

In this tutorial, you will learn how to create a circular text with CSS & CircleType.js. Then an animation for rotating the circle on scroll is added. Watch the video below for a detailed tutorial.

BODY

<body>
  <div class="container">
    <div class="circle">
      <p id="text">Lorem &#8226; Ipsum &#8226; Dolor &#8226; Sit &#8226; Amet &#8226;</p>
    </div>
  </div>

  <!-- https://circletype.labwire.ca/ -->
  <script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script>

  <script>
    const text = document.getElementById('text')
    const rotate = new CircleType(text).radius(50)

    window.addEventListener('scroll', function(){
      text.style.transform = 'rotate(' + (window.scrollY * 0.15) + 'deg)'
    })
  </script>
</body>

CSS

body {
  background: #2e3537;
  margin: 0;
  font-family: 'Arial', sans-serif;
}

#text {
  color: white;
  font-size: 50px;
  font-weight: 700;
  text-transform: uppercase;
}

.container {
  position: relative;
  height: 250vh;
}

.circle {
  position: fixed;
  top: 18%;
  left: 50%;
}