` ````
<div id="container" ></div>
```

` ````
html,
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #1d1f20;
overflow: hidden;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#container {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
p {
color: #ffa500;
position: absolute;
height: auto;
width: auto;
white-space: nowrap;
font-weight: bold;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
```

` ````
var readyStateCheckInterval = setInterval( function() {
if (document.readyState === "complete") {
clearInterval(readyStateCheckInterval);
window.addEventListener("resize", resizeHandler);
init();
animate();
}
}, 10);
var caption = "CIRCULAR LOGIC WORKS, BECAUSE ",
resizeTimeoutId = -1,
container,
currentYRotation = 0,
currentXRotation = 0,
xRotationDirection = 1,
maxXRotation = 28,
animating = false;
function animate(){
window.requestAnimationFrame(animate, container);
if(animating){
update();
}
}
//avoid running script repeatedly if a browser window is being resized by dragging
function resizeHandler(){
animating = false
if(resizeTimeoutId==-1){
container.innerHTML = "";
}
clearTimeout(resizeTimeoutId);
resizeTimeoutId = setTimeout(init, 300 );
}
function init(){
container = document.getElementById("container");
container.innerHTML = "";
renderText();
currentYRotation = 270;
currentXRotation = -maxXRotation;
xRotationDirection = 1;
animating = true;
}
function update(){
setTransform(container, "rotateX("+currentXRotation+"deg) rotateY("+currentYRotation+"deg)");
currentYRotation -= .6;
currentXRotation += (.2 * xRotationDirection);
if(currentXRotation>maxXRotation){
currentXRotation = maxXRotation;
xRotationDirection = -1;
}
if(currentXRotation<-maxXRotation){
currentXRotation = -maxXRotation;
xRotationDirection = 1;
}
}
function renderText(){
var i, segments = [],
character, characters = [],
space = 0;
var fontSize = getFontSize();
for(i=0; i<caption.length; i++){
character = document.createElement("p");
character.appendChild(document.createTextNode(caption.charAt(i) ) );
container.appendChild(character);
characters[i] = character;
character.style.fontSize = fontSize + "px";
segments[i] = character.clientWidth || space;
if(i==1){
space = segments[i];
}
}
var circumference = getCircumferenceForSegments(segments);
positionCharacters(characters, segments, circumference);
}
function positionCharacters(characters, segments, circumference){
var i, x, z,
segment,
segmentAngle,
radian = 0,
transform = "",
radius = (circumference / Math.PI ) / 2;
for(i=0; i<segments.length; i++){
segment = segments[i];
segmentAngle = -radian + (Math.PI - solveAngle(segment, radius, radius));
x = radius + Math.cos(radian) * radius;
z = Math.sin(radian) * radius;
transform = "translateX( "+ x +"px ) translateZ( "+ z +"px ) rotateY( "+ segmentAngle +"rad )";
setTransform(characters[i], transform);
radian -= solveAngle(radius, radius, segment);
}
}
function getFontSize(){
var fontSize = 300, targetWidth = window.innerWidth * 3;
var test = document.createElement("p");
test.innerHTML = caption;
document.body.appendChild(test);
while(fontSize>10){
test.style.fontSize = fontSize + "px";
if(test.clientWidth < targetWidth){
break;
}
fontSize -= 3;//slow, I know
}
document.body.removeChild(test);
return fontSize;
}
function setTransform(element, transform){
element.style.webkitTransform = transform;
element.style.MozTransform = transform;
element.style.msTransform = transform;
element.style.OTransform = transform;
element.style.transform = transform;
}
//Estimates circumference by adding lengths of segments together
//then aligns segments along a circle with this estimated circumference
//returns a circumference with "overflow" of estimated circumference added to itself
function getCircumferenceForSegments(segments){
var circumference = 0, radian = 0;
segments.forEach(function(element){
circumference += element;
});
var radius = (circumference / Math.PI ) / 2;
segments.forEach(function(element){
radian += solveAngle(radius, radius, element);
});
return circumference + (radian - Math.PI*2) * radius;
}
//from : http://www.nayuki.io/res/triangle-solver-javascript/triangle-solver.js
function solveAngle(a, b, c) { // Returns angle C using law of cosines
var temp = (a * a + b * b - c * c) / (2 * a * b);
if (temp >= -1 && temp <= 0.9999999)
return Math.acos(temp);
else if (temp <= 1) {
// Improves numerical stability for angles near 0.
// For cases where a ~= b, and both a and b are much greater than c.
// Based on the fact that cos C ~= 1 - C^2 / 2.
return Math.sqrt((c * c - (a - b) * (a - b)) / (a * b));
}
return NaN;
}
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers