It’s over midnight, but it is summer… I’ve made this kind of effect in Monkey X earlier. Just tried to make it in JavaScript too. Video:
The source code:
<!DOCTYPE html>
<html lang="fi">
<head>
<link rel="StyleSheet" href="tyylit.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8"/>
<title>Rolling and rotating text</title>
</head>
<script>
var canvas = undefined;
var ctx = undefined;
var angle = -270;
var start = 0;
var i = 0;
const SCROLLTEXT = " Rolling and rotating text in JavaScript with alpha...... Source code at my web site.... ";
window.onload = function() {
canvas = document.getElementById("canvas");
canvas.setAttribute("width",document.documentElement.clientWidth);
canvas.setAttribute("height",document.documentElement.clientHeight);
ctx = canvas.getContext("2d");
ctx.font = "48px courier";
rotate_text();
}
function rotate_text() {
ctx.clearRect(0,0,document.documentElement.clientWidth,document.documentElement.clientHeight);
i = 0;
let alpha = 0;
for (let angle2 = -270 - angle; angle2 < -270 + 360 - angle; angle2+=10) {
letter = SCROLLTEXT.substring(start + i, start + i + 1);
ctx.save();
ctx.translate(Math.cos((angle2) * (Math.PI / 180)) * 250, Math.sin(( angle2) * (Math.PI / 180)) * 250);
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate((angle2) * (Math.PI / 180));
ctx.translate(-canvas.width / 2, -canvas.height / 2);
ctx.fillStyle = "#1122FF";
alpha = 1 + Math.cos((angle2 + 90) * Math.PI / 180);
ctx.globalAlpha = alpha;
ctx.fillText(letter, canvas.width / 2 , canvas.height / 2);
ctx.restore();
i++;
}
if (angle % 10 == 0) {
start+=1;
angle=0;
}
angle += 0.5;
if (start == SCROLLTEXT.length - 36) {
start = 0;
}
window.requestAnimationFrame(rotate_text);
}
</script>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
The line where CSS style is loaded is not needed.
Feel free to use the code.
