Textschatten verwenden um einen sich bewegenden Regenbogen zu erzeugen.
Einmal mit canvas und einmal mit Css
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>