How can I achieve a scrollable circular text effect similar to http://thisiskiosk.com/

Question

If you take a look at KIOSK WEBSITE HERE they have the 'WE ARE OPEN" circular type in javascript (I know how to do that) but what I don't know is how to achieve that when scrolling. Like how does the text move when scrolling up or down. How do you get that in HTML/CSS/JS ?

View the code I worked on here https://codepen.io/noel_emmanuel/pen/WJxRZW

HTML:

<!--just a container used to position in the page-->
<div class="container">
  <!--the holders/targets for the text, reuse as desired-->
  <div class="circTxt" id="test"></div>
</div>

<!--I told you it was simple! :)-->

CSS:

body {
  background: #111;
}

.container {
  /*centers in the container*/
  text-align: center;
}

div.circTxt {
  /*allows for centering*/
  display: inline-block;
  /*adjust as needed*/
  margin-bottom: 128px;
  color: whitesmoke;
}

JS:

function circularText(txt, radius, classIndex) {
  txt = txt.split(""),
    classIndex = document.getElementsByClassName("circTxt")[classIndex];

  var deg = 360 / txt.length,
    origin = 0;

  txt.forEach((ea) => {
    ea = `<p style='height:${radius}px;position:absolute;transform:rotate(${origin}deg);transform-origin:0 100%'>${ea}</p>`;
    classIndex.innerHTML += ea;
    origin += deg;
  });
}

circularText("WE ARE OPEN", 100, 0);

OPEN FOR SUGGESTIONS.

Answer 1

You could rotate this on a scroll event. This simply rotates the div depending on how far from the top of the page you have scrolled.

I added a height and width to the text, as well as positioned it fixed to see the effect.

 function circularText(txt, radius, classIndex) { txt = txt.split(""), classIndex = document.getElementsByClassName("circTxt")[classIndex]; var deg = 360 / txt.length, origin = 0; txt.forEach((ea) => { ea = `<p style='height:${radius}px;position:absolute;transform:rotate(${origin}deg);transform-origin:0 100%'>${ea}</p>`; classIndex.innerHTML += ea; origin += deg; }); } circularText("WE ARE OPEN", 100, 0); $(document).ready(function(){ $(window).scroll(function(e){ rotateText(); }); function rotateText(){ var scrolled = $(window).scrollTop(); $('div.circTxt').css('transform','rotate('+scrolled+'deg)'); } }); 

 body { background: #111; } .container { /*centers in the container*/ text-align: center; height: 4000px; } div.circTxt { /*allows for centering*/ display: inline-block; /*adjust as needed*/ margin-bottom: 128px; color: whitesmoke; position: fixed; height: 200px; width: 200px; transform-origin: 0% 59%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--just a container used to position in the page--> <div class="container"> <!--the holders/targets for the text, reuse as desired--> <div class="circTxt" id="test"></div> </div> <!--I told you it was simple! :)-->