Rainbow Text-shadow

Textschatten verwenden um einen sich bewegenden Regenbogen zu erzeugen. Einmal mit canvas und einmal mit Css

Der hier verwendete Code

<!DOCTYPE html> <html lang="en"> <head> <title>Rainbow Text-shadow - Matthew Lein</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <style> #example { background-color:#000; padding: 5px; margin-bottom: 20px; } #example #holder { display: block; font-size: 250px; font-family: sans-serif; text-align: center; color:#fff; letter-spacing: 50px; margin-top: 90px; margin-bottom: 0px; } .beginTest { margin-bottom: 10px; } canvas { border: 1px solid black; background-color: #000; display: block; margin-bottom: 20px; } </style> </head> <body> <div class="site-wrapper"> <main class="main article"> <h1 class="article__heading"> Rainbow Text-shadow </h1> <section class="article__demo"> <script src="https://matthewlein.com/assets/js/lib/jquery-2.1.1.min.js"></script> <script> $(document).ready(function(){ colors = [ '#EC1C24', '#EE5727', '#EF9129', '#F7C115', '#FFF100', '#80CB29', '#00A551', '#0E8D86', '#1B75BB', '#564EA5', '#90278E', '#BE2259' ] newColors = [] for (a=0;a<=colors.length-1;a++) { for (b=1;b<=5;b++) { newColors.push(colors[a]) } } function changeColors(){ z = 0 //C xOffset = 0 yOffset = 0 //S xOffset2 = 0 yOffset2 = 0 //S2 xOffset3 = 0 yOffset3 = 0 currentColor = newColors[z] newShadow = xOffset + "px " + yOffset + "px " + currentColor letterOne = document.getElementById("one") letterTwo = document.getElementById("two") letterThree = document.getElementById("three") holder = document.getElementById("holder") letterOne.style.textShadow = newShadow letterTwo.style.textShadow = newShadow letterThree.style.textShadow = newShadow holder.removeChild(letterOne) holder.removeChild(letterTwo) holder.removeChild(letterThree) for (z=0;z<=newColors.length;z++) { currentColor = newColors[z] //for C xOffset++ yOffset-- currentShadow = letterOne.style.textShadow newShadow = currentShadow + ',' + xOffset + "px " + yOffset + "px " + currentColor letterOne.style.textShadow = newShadow //for S yOffset2-- currentShadow = letterTwo.style.textShadow newShadow = currentShadow + ',' + xOffset2 + "px " + yOffset2 + "px " + currentColor letterTwo.style.textShadow = newShadow //for S xOffset3-- yOffset3-- currentShadow = letterThree.style.textShadow newShadow = currentShadow + ',' + xOffset3 + "px " + yOffset3 + "px " + currentColor letterThree.style.textShadow = newShadow } holder.appendChild(letterOne) holder.appendChild(letterTwo) holder.appendChild(letterThree) lastColor = newColors.pop() newColors.unshift(lastColor) } changeColors() canvas = document.getElementById('canvasRainbow') ctx = canvas.getContext('2d'); ctx.globalCompositeOperation = 'destination-over'; ctx.font = 'bold 250px sans-serif'; function canvasChangeColors(){ ctx.clearRect(0,0,canvas.width,canvas.height) //Create C ctx.fillStyle = '#FFF'; xPos = 20 yPos = 300 ctx.fillText('C', xPos, yPos); for (z=0;z<=newColors.length;z++) { currentColor = newColors[z] xPos++ yPos-- ctx.fillStyle = currentColor ctx.fillText('C', xPos, yPos); } //Create S ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = '#FFF'; xPos = 250 yPos = 300 ctx.fillText('S', xPos, yPos); ctx.globalCompositeOperation = 'destination-over'; for (z=0;z<=newColors.length;z++) { currentColor = newColors[z] yPos-- ctx.fillStyle = currentColor ctx.fillText('S', xPos, yPos); } //Create S ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = '#FFF'; xPos = 460 yPos = 300 ctx.fillText('S', xPos, yPos); ctx.globalCompositeOperation = 'destination-over'; for (z=0;z<=newColors.length;z++) { currentColor = newColors[z] xPos-- yPos-- ctx.fillStyle = currentColor ctx.fillText('S', xPos, yPos); } //move the last color to the front lastColor = newColors.pop() newColors.unshift(lastColor) } canvasChangeColors() var rainbowInt; var canvasInt; $('#madness').on('click', function(event) { if ( !$(this).data('isClicked') ) { rainbowInt = setInterval(changeColors,1000/60); $(this).text('Stop the Madness!') $(this).data('isClicked', true); } else { clearInterval(rainbowInt) $(this).text('Begin the Madness!') $(this).data('isClicked', false); } }); $('#canvasTest').on('click', function(event) { if ( !$(this).data('isClicked') ) { canvasInt = setInterval(canvasChangeColors,1000/60) $(this).text('Stop the canvas!') $(this).data('isClicked', true); } else { clearInterval(canvasInt); $(this).text('Let the canvas rip!') $(this).data('isClicked', false); } }); }) </script> </section> <div class="container container--mid"> <article class="article__body article__body--text"> <h2>CSS Version</h2> <button name="madness" id="madness" class="beginTest">Begin the Madness!</button> <div id="example"> <span id="holder"><span id="one">C</span><span id="two">S</span><span id="three">S</span></span> </div> <h2>Canvas Version</h2> <button name="canvasTest" id="canvasTest" class="beginTest">Let the canvas rip!</button> <canvas id="canvasRainbow" width="650" height="400"></canvas> </article> </div> </main> <script> </script> </div> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!