Owijanie listów wokół okręgu

Próbuję zawijać litery wokół obramowania okręgu 4 div s. Wymyśliłem "Jak" to osiągnąć, ale nie rozumiem, jak układać moje listy, aby owijać w kierunku przeciwnym do ruchu wskazówek zegara i od góry do dołu. Poniżej znajduje się mój fragment. Chcę, aby górna część liter przejeżdżała przez wewnętrzną granicę dwóch dolnych liter i dolną część liter, aby przejechać górną krawędź wewnętrzną dwóch najwyższych numerów: div.Owijanie listów wokół okręgu

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

Źródło

2016-06-23 Josh Lavely

Zrobiłem bardziej kompaktową wersję tekstu kołowej, które można odtworzyć z tutaj: https://jsfiddle.net/Arg0n/L9wswL7h/ – Arg0n

Uaktualnienie tekstu u dołu (inny obrót itp.): Https://jsfiddle.net/Arg0n/L9wswL7h/1/ – Arg0n

Po prostu zobaczyłem, że edytujesz, pozwól mi trochę zagrać. –

Zgodnie komentarzach, i pod warunkiem, coś pobawić z 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; 
}

i modyfikowane „prawdziwy” kod here

Źródło

2016-06-27 06:28:24 Arg0n

Owijanie listów wokół okręgu

Odpowiedz

Powiązane problemy