html knowhow

Gebogener Text

So sieht´s aus

HTML Knowhow

Quellcode

<html>
<head>

<style type="text/css">
#round {position: relative; display: inline-block; transform-origin: 50% 100%; white-space: nowrap; color:green;
font-size: 3em; text-align: center; font-weight:bold;text-shadow: 1px 1px yellow;}
#round .char {position: relative; display: inline-block;}
</style>
</head>

<body>
<span id="round">HTML Knowhow</span>
<script type="text/javascript" src="http://kkjs.kkapsner.de/modules/kkjs.load.js"></script>
<script type="text/javascript">
(function(){
var round = kkjs.$("round");
var text = round.textContent;
round.innerHTML = "";
var textNodes = text.replace(/\s/, " ").split("").map(function(char){
return kkjs.node.create({
tag: "span",
className: "char",
childNodes: [char === " "? "\xA0" :char]
});
});
textNodes.forEach(function(node){
round.appendChild(node);
});
var width = round.clientWidth;
var angleRange = Math.PI / 4;
var radius = width * 4 / Math.PI;
var offset = {
x: radius * Math.sin(angleRange / 2),
y: radius
};
textNodes.forEach(function(node){
var xBend = node.offsetLeft + node.offsetWidth / 2 - width / 2;
var angle = -(Math.PI + angleRange * xBend / width);
console.log(angle);
kkjs.css.set(node, {
rotation: kkjs.sprintf("%fdeg", 180 - angle * 180 / Math.PI),
top: (offset.y + radius * Math.cos(angle)),
left: offset.x + radius * Math.sin(angle) - node.offsetLeft - node.offsetWidth / 2
});
});
kkjs.css.set(round, {
paddingBottom: (radius - radius * Math.cos(angleRange / 2)) + "px",
paddingRight: (round.clientHeight * Math.sin(angleRange / 2)) + "px",
paddingLeft: (round.clientHeight * Math.sin(angleRange / 2)) + "px"
});
}());
</script>
</body>

</html>

Kontakt Datenschutz Impressum