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.