Circular Logic Works Because...

Developer
Sakri Rosenstrom
Size
3,427 Kb
Views
24,288
  1. Circular Logic Works Because... Previews
  2. Circular Logic Works Because... HTML Codes
  3. Circular Logic Works Because... CSS Codes
  4. Circular Logic Works Because... JS Codes

How do I make an circular logic works because...?

Trying out CSS3 3d transforms, create a for every character, position them in a circle and rotate the containers y.. What is a circular logic works because...? How do you make a circular logic works because...? This script and codes were developed by Sakri Rosenstrom on 13 September 2022, Tuesday.

Circular Logic Works Because... Previews
IQ Test

Circular Logic Works Because... - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Circular Logic Works Because...</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container" ></div> <script src="js/index.js"></script>
</body>
</html>

Circular Logic Works Because... - Script Codes CSS Codes

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;
}

Circular Logic Works Because... - Script Codes JS Codes

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;
}
Circular Logic Works Because... - Script Codes
Circular Logic Works Because... - Script Codes
Home Page Home
Developer Sakri Rosenstrom
Username sakri
Uploaded September 13, 2022
Rating 3
Size 3,427 Kb
Views 24,288
Do you need developer help for Circular Logic Works Because...?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sakri Rosenstrom (sakri) Script Codes
Name
Circular Wander Text
Canvas Bitmap Collision with XOR
Text On Fire
Huge Comment Generator
Flappy Van Persie
Particles
Flappy Lego
Jello Text
Flappy Bird 32px by 32px
Classic text effect
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!