Lettera che avvolge un cerchio

Sto provando a racchiudere le lettere attorno al bordo di un cerchio di 4 div s. Ho capito 'Come' per raggiungere questo obiettivo, ma non riesco a capire come posizionare le mie lettere per avvolgere in senso antiorario e dall'alto verso il basso. Di seguito è il mio frammento. Voglio che la parte superiore delle lettere guidi il bordo interno dei due inferiori div se la parte inferiore delle lettere superi la parte superiore del bordo interno nei primi due div s.Lettera che avvolge un cerchio

// 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>

fonte

2016-06-23 Josh Lavely

Ho fatto una versione più compatta di testo circolare che si può giocare con qui: https://jsfiddle.net/Arg0n/L9wswL7h/ – Arg0n

Aggiornamento per il testo in basso (diversa rotazione, ecc.): Https://jsfiddle.net/Arg0n/L9wswL7h/1/ – Arg0n

Ho appena visto la modifica, lasciami giocare con essa. –

Come per i commenti, ho fornito qualcosa a giocherellare con 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; 
}

e modificato il codice "reale" here

fonte

2016-06-27 06:28:24 Arg0n

Lettera che avvolge un cerchio

risposta

Problemi correlati