Letter wrapping around a circle

Question

I am trying to wrap letters around a circle border of 4 divs. I have figured out 'How' to accomplish this but i am falling short understanding how to position my letters to wrap counterclockwise and from top to bottom. Below is my snippet. I want the top of the letters to ride the inside border of the bottom two divs and the bottom of the letters to ride the top of the inside border on the top two divs.

// begin jQuery -- 
$(document).ready(function($) {
  var audio = new Audio('http://soundbible.com/grab.php?id=1377&type=mp3');

  function beep() {

    audio.play();
  }

  var c = 0;
  var resumeT = 0;
  var t;
  var timer_is_on = 0;
  $('#resume').hide();
  var pomodoros = 0;
  // Convert given number to readable format
  var SecondsTohhmmss = function(totalSeconds) {
    var hours = Math.floor(totalSeconds / 3600);
    var minutes = Math.floor((totalSeconds - (hours * 3600)) / 60);
    var seconds = totalSeconds - (hours * 3600) - (minutes * 60);

    // round seconds
    seconds = Math.round(seconds * 100) / 100

    var result = (hours < 10 ? "0" + hours : hours);
    result += ":" + (minutes < 10 ? "0" + minutes : minutes);
    result += ":" + (seconds < 10 ? "0" + seconds : seconds);
    return result;
  }

  // timer functions
  function timedCount(c) {
    $('#quart').off('mouseenter mouseleave');
    if (c === 0) {
      $('#time').val('Great Job!')
      beep();
      clearTimeout(t);
      alert('Now go for a short, brisk walk you over-achiever!')
      pomodoros++;
      $('#pomodoros').val(pomodoros);
    } else {
      var totalSeconds = c--;
      resumeT = totalSeconds;
      //console.log(resumeT);
      var results = SecondsTohhmmss(totalSeconds);
      $('#time').val(results);
      $('.center').val(results);
      t = setTimeout(function() {
        timedCount(c)
      }, 1000);
    }
  }

  function resetCount() {
    c = 0;
    resumeT = 0;
    timer_is_on = 0;
    if (!timer_is_on) {
      // console.log(c);
      timer_is_on = 1;
      var check = $('#timeInt').val();
      console.log(check);
      if (check === '') {
        c = 25 * 60;
      } else c = check * 60;
      // below commented gives option to set their own time default is 25.
      //c = $('#timeInt').val()
      timedCount(c);
    }
  }

  function startCount() {
    $('#one').removeClass("quart:hover");
    if (!timer_is_on) {
      // console.log(c);
      timer_is_on = 1;
      var check = $('#timeInt').val();
      console.log(check);
      if (check === '') {
        c = 25 * 60;
      } else c = check * 60;
      // below commented gives option to set their own time default is 25.
      //c = $('#timeInt').val()
      timedCount(c);
    }
  }

  function resumeCount() {
    $('#resume').hide();
    $('#pause').show();
    timer_is_on = 0;
    console.log(resumeT);
    //c = resumeT;
    //timedCount(c);
    t = setTimeout(function() {
      timedCount(resumeT)
    }, 1000);

  }

  function stopCount() {
    // Toggle text on Pause/ Resume
    $('#pause').hide();
    $('#resume').show();
    clearTimeout(t);
    timer_is_on = 0;
  }
  // Button Control
  $('#one').click(startCount);
  $('#four').click(resumeCount);
  $('#two').click(stopCount);
  $('#three').click(resetCount);
});

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);
#controls {
  width: 50%;
  display: table;
  margin: 0 auto;
}

#mainTitle {
  display: table!important;
  margin: 0 auto!important;
}

h1 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 55%;
  top: 1%;
  display: table;
  margin: 0 auto;
  transform-origin: bottom center;
}

.char1 {
  transform: rotate(6deg);
}

.char2 {
  transform: rotate(12deg);
}

.char3 {
  transform: rotate(18deg);
}

.char4 {
  transform: rotate(24deg);
}

.char5 {
  transform: rotate(30deg);
}

.char6 {
  transform: rotate(36deg);
}

.char7 {
  transform: rotate(42deg);
}

.char8 {
  transform: rotate(48deg);
}

.char9 {
  transform: rotate(54deg);
}

.char10 {
  transform: rotate(60deg);
}

.char11 {
  transform: rotate(66deg);
}

.char12 {
  transform: rotate(72deg);
}

#one span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20%;
  right: 30%;
  top: 20%;
  transform-origin: 35% 46%;
}

.char13 {
  transform: rotate(-60deg);
}

.char14 {
  transform: rotate(-50deg);
}

.char15 {
  transform: rotate(-40deg);
}

.char16 {
  transform: rotate(-30deg);
}

.char17 {
  transform: rotate(-20deg);
}

#two span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20%;
  left: 30%;
  top: 12%;
  display: table;
  margin: 0 auto;
  transform-origin: 3% 46%;
}

.char18 {
  transform: rotate(5deg);
}

.char19 {
  transform: rotate(18deg);
}

.char20 {
  transform: rotate(31deg);
}

.char21 {
  transform: rotate(43deg);
}

.char22 {
  transform: rotate(56deg);
}

#three span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20%;
  left: 0;
  top: 0;
  display: table;
  margin: 0 auto;
  transform-origin: 560% -20%;
}

.char23 {
  transform: rotate(310deg);
}

.char24 {
  transform: rotate(315deg);
}

.char25 {
  transform: rotate(320deg);
}

.char26 {
  transform: rotate(325deg);
}

.char27 {
  transform: rotate(330deg);
}

#four span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  right: 0;
  bottom: 10%;
  display: table;
  margin: 0 auto;
  transform-origin: -2000% -90%;
}

.char28 {
  transform: rotate(5deg);
}

.char29 {
  transform: rotate(10deg);
}

.char30 {
  transform: rotate(15deg);
}

.char31 {
  transform: rotate(20deg);
}

.char32 {
  transform: rotate(25deg);
}

.char33 {
  transform: rotate(30deg);
}

#play {
  float: right;
  width: 22%;
}

#pause {
  width: 21%;
  -ms-transform: rotate(1deg);
  /* IE 9 */
  -webkit-transform: rotate(1deg);
  /* Chrome, Safari, Opera */
  transform: rotate(1deg);
  position: absolute!important;
}

#pomodoros {
  width: 50%;
  display: table;
  marign: 0 auto;
}

#time {
  display: table;
  margin: 0 auto;
  height: 300px;
  width 200px;
  border-radius: 50%;
  border: solid;
  text-align: center;
  margin-top: 2%;
  font-size: 30px;
}

button,
input {
  display: table;
  margin: 0 auto;
}

#pomodoros {
  border-radius: 50%;
  width: 30px;
  margin-right: 5%;
  ;
  text-align: center;
  color: white;
  font-weight: 400;
  background-color: black;
}

#clock {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: solid;
  margin-top: 20px;
}

#outer {
  width: 550px;
  height: 550px;
  border-radius: 50%;
  border: solid;
}

label {
  display: inline-block;
  width: 5em;
}

.wrap {
  height: 500px;
  width: 500px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 5%;
  cursor: pointer;
}

.quart {
  position: absolute;
  height: 50%;
  width: 50%;
  background: tomato;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.quart:first-child {
  top: 0;
  left: 0;
}

.quart:nth-child(2) {
  top: 0;
  left: 50%;
}

.quart:nth-child(3) {
  top: 50%;
  left: 0;
}

.quart:nth-child(4) {
  top: 50%;
  left: 50%;
}

.quart:nth-child(4):hover {
  content: 'text';
}

#keepCount {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  position: absolute;
  background-color: yellow;
}

.center {
  height: 80%;
  width: 80%;
  position: absolute;
  top: 10%;
  left: 10%;
  background-color: dimgray;
  border-radius: 50%;
  text-align: center;
  line-height: 160px;
}

.quart:hover {
  transform: scale(1.2);
  background-color: yellow;
  color: black;
}

#timeInt {
  z-index: 1px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--<div id="outer" class="container-fluid wrap">
<div id="clock" class="container-fluid">
  <input id="time" type="text" disabled></input>
  <div class="container-fluid">
  <div id="controls">
 <div class="resetTime">
<button id="reset">Reset</button>
   <button id="pause">Pause</button><button id="resume">Resume</button>
</div>
       <input id="pomodoros"></input>
    </div>
<div class="adjust">
  <input id="timeInt" type="text" enabled placeholder="       Enter time in mins."><button id="start">Start</button></input>
  </div>
  </div>
</div>
</div>


<img id="play" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/591470/1466634277_Play1Disabled.png'></img>
<img id="pause" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/591470/1466634288_PauseDisabled.png'>
-->
<h1 id="mainTitle">
  <span class="char1">Y</span>
  <span class="char2">o</span>
  <span class="char3">u</span>
  <span class="char4">r</span>
  <span class="char4"> </span>
  <span class="char5"> P</span>
  <span class="char6">o</span>
  <span class="char7">m</span>
  <span class="char8">o</span>
  <span class="char9">d</span>
  <span class="char10">o</span>
  <span class="char11">r</span>
  <span class="char12">o</span> 
</h1>
<div class="wrap">
  <div id="one" class="quart" title="Start your Pomodoro">
    <span class="char13">S</span>
    <span class="char14">t</span>
    <span class="char15">a</span>
    <span class="char16">r</span>
    <span class="char17">t</span>
  </div>
  <div id="two" class="quart" title="Pause Pomodoro">
    </img>
    <span class="char18">P</span>
    <span class="char19">a</span>
    <span class="char20">u</span>
    <span class="char21">s</span>
    <span class="char22">e</span>
  </div>
  <div id="three" class="quart" title="Reset Pomodoro">
    <span class="char23">t</span>
    <span class="char24">e</span>
    <span class="char25">s</span>
    <span class="char26">e</span>
    <span class="char27">R</span>
  </div>
  <div id="four" class="quart" title="Resume Pomodoro">

    <span class="char28">e</span>
    <span class="char29">m</span>
    <span class="char30">u</span>
    <span class="char31">s</span>
    <span class="char32">e</span>
    <span class="char33">R</span>
  </div>
  <input id="timeInt" type="text"></input>
  <h1><input class="center" disabled>
      <div id="countPomos"><input id="keepCount"></input></div>
<!--
Working CSS for 'REsume'

#four span{
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  right: 0;
  top: 10%;
  display: table;
  margin: 0 auto;
  transform-origin: -1000% -9%; ;
}
.char28 { transform: rotate(90deg); }
.char29 { transform: rotate(95deg); }
.char30 { transform: rotate(20deg); }
.char31 { transform: rotate(25deg); }
.char32 { transform: rotate(30deg); }
.char33 { transform: rotate(35deg); }


-->
    
    
    
    </input></h1>
</div>

Arg0n · Accepted Answer

As per the comments, i provided something to fiddle with here

HTML

<h1 class="circular circular-top"
  style="left: 0; top:100px; transform: rotate(-60deg)">Testing circular text</h1>
<h1 class="circular circular-bottom" 
  style="position: absolute;top: 100px;left:175px;transform: rotate(70deg)">
  Testing circular text
</h1>

JavaScript

$(function() {
    $(".circular").each(function(index, el){ 
    var $el = $(el);
    $el.html($el.text().replace(/(.{1})/g, '<span>$1</span>'));
    $el.find("span").each(function(index2, el2) {
        $(el2).css("transform", "rotate(" + ($el.hasClass("circular-top") ? 6 : -6) * index2 + "deg)");
    });
  });
});

CSS

.circular {
  font: 26px Monaco, MonoSpace;
  position: absolute;
}

.circular span {
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
}

.circular-top span {
  height: 200px;
  transform-origin: bottom center;
}

.circular-bottom span {
  padding-top: 180px;
  transform-origin: top center;
}

And modified the "real" code here

Letter wrapping around a circle

Tags:

javascript

html

jquery

css

letteringjs

Josh Lavely

1 Answers

Arg0n

Recent Activity

Donate For Us

Letter wrapping around a circle

Tags:

javascript

html

jquery

css

letteringjs

Josh Lavely

1 Answers

Arg0n

Related questions

Recent Activity

Donate For Us