laufschrift-kreis-laser-show.php
Quell Code
<style>
.circle {
position: relative;
border: 4px solid #8B0000;
width: 300px;
height: 300px;
margin: 0 auto;
background: firebrick;
border-radius: 50%;
background: url(http://wallpapercave.com/wp/Zaddkt5.jpg);
background-size: cover;
box-shadow: 0 0 300px -50px #ffe766;
}
.circle .rotate {
position: absolute;
width: 100%;
height: 100%;
animation: rotate 120s infinite linear;
}
.circle span {
position: absolute;
top: -40px;
left: calc(50% - 3.75px);
display: block;
width: 7.5px;
height: 190px;
font-family: Special Elite;
font-size: 1rem;
font-weight: 100;
font-weight: bold;
text-transform: uppercase;
color: #f0f;
transform-origin: bottom center;
}
.circle span:nth-child(1) {
transform: rotate(6.2deg);
}
.circle span:nth-child(2) {
transform: rotate(12.4deg);
}
.circle span:nth-child(3) {
transform: rotate(18.6deg);
}
.circle span:nth-child(4) {
transform: rotate(24.8deg);
}
.circle span:nth-child(5) {
transform: rotate(31deg);
}
.circle span:nth-child(6) {
transform: rotate(37.2deg);
}
.circle span:nth-child(7) {
transform: rotate(43.4deg);
}
.circle span:nth-child(8) {
transform: rotate(49.6deg);
}
.circle span:nth-child(9) {
transform: rotate(55.8deg);
}
.circle span:nth-child(10) {
transform: rotate(62deg);
}
.circle span:nth-child(11) {
transform: rotate(68.2deg);
}
.circle span:nth-child(12) {
transform: rotate(74.4deg);
}
.circle span:nth-child(13) {
transform: rotate(80.6deg);
}
.circle span:nth-child(14) {
transform: rotate(86.8deg);
}
.circle span:nth-child(15) {
transform: rotate(93deg);
}
.circle span:nth-child(16) {
transform: rotate(99.2deg);
}
.circle span:nth-child(17) {
transform: rotate(105.4deg);
}
.circle span:nth-child(18) {
transform: rotate(111.6deg);
}
.circle span:nth-child(19) {
transform: rotate(117.8deg);
}
.circle span:nth-child(20) {
transform: rotate(124deg);
}
.circle span:nth-child(21) {
transform: rotate(130.2deg);
}
.circle span:nth-child(22) {
transform: rotate(136.4deg);
}
.circle span:nth-child(23) {
transform: rotate(142.6deg);
}
.circle span:nth-child(24) {
transform: rotate(148.8deg);
}
.circle span:nth-child(25) {
transform: rotate(155deg);
}
.circle span:nth-child(26) {
transform: rotate(161.2deg);
}
.circle span:nth-child(27) {
transform: rotate(167.4deg);
}
.circle span:nth-child(28) {
transform: rotate(173.6deg);
}
.circle span:nth-child(29) {
transform: rotate(179.8deg);
}
.circle span:nth-child(30) {
transform: rotate(186deg);
}
.circle span:nth-child(31) {
transform: rotate(192.2deg);
}
.circle span:nth-child(32) {
transform: rotate(198.4deg);
}
.circle span:nth-child(33) {
transform: rotate(204.6deg);
}
.circle span:nth-child(34) {
transform: rotate(210.8deg);
}
.circle span:nth-child(35) {
transform: rotate(217deg);
}
.circle span:nth-child(36) {
transform: rotate(223.2deg);
}
.circle span:nth-child(37) {
transform: rotate(229.4deg);
}
.circle span:nth-child(38) {
transform: rotate(235.6deg);
}
.circle span:nth-child(39) {
transform: rotate(241.8deg);
}
.circle span:nth-child(40) {
transform: rotate(248deg);
}
.circle span:nth-child(41) {
transform: rotate(254.2deg);
}
.circle span:nth-child(42) {
transform: rotate(260.4deg);
}
.circle span:nth-child(43) {
transform: rotate(266.6deg);
}
.circle span:nth-child(44) {
transform: rotate(272.8deg);
}
.circle span:nth-child(45) {
transform: rotate(279deg);
}
.circle span:nth-child(46) {
transform: rotate(285.2deg);
}
.circle span:nth-child(47) {
transform: rotate(291.4deg);
}
.circle span:nth-child(48) {
transform: rotate(297.6deg);
}
.circle span:nth-child(49) {
transform: rotate(303.8deg);
}
.circle span:nth-child(50) {
transform: rotate(310deg);
}
.circle span:nth-child(51) {
transform: rotate(316.2deg);
}
.circle span:nth-child(52) {
transform: rotate(322.4deg);
}
.circle span:nth-child(53) {
transform: rotate(328.6deg);
}
.circle span:nth-child(54) {
transform: rotate(334.8deg);
}
.circle span:nth-child(55) {
transform: rotate(341deg);
}
.circle span:nth-child(56) {
transform: rotate(347.2deg);
}
.circle span:nth-child(57) {
transform: rotate(353.4deg);
}
.circle span:nth-child(58) {
transform: rotate(359.6deg);
}
.circle span:nth-child(59) {
transform: rotate(365.8deg);
}
.circle span:nth-child(60) {
transform: rotate(372deg);
}
.circle span:nth-child(61) {
transform: rotate(378.2deg);
}
.circle span:nth-child(62) {
transform: rotate(384.4deg);
}
.circle span:nth-child(63) {
transform: rotate(390.6deg);
}
.circle span:nth-child(64) {
transform: rotate(396.8deg);
}
.circle span:nth-child(65) {
transform: rotate(403deg);
}
.circle span:nth-child(66) {
transform: rotate(409.2deg);
}
.circle span:nth-child(67) {
transform: rotate(415.4deg);
}
.circle span:nth-child(68) {
transform: rotate(421.6deg);
}
.circle span:nth-child(69) {
transform: rotate(427.8deg);
}
.circle span:nth-child(70) {
transform: rotate(434deg);
}
.circle span:nth-child(71) {
transform: rotate(440.2deg);
}
.circle span:nth-child(72) {
transform: rotate(446.4deg);
}
.circle span:nth-child(73) {
transform: rotate(452.6deg);
}
.circle span:nth-child(74) {
transform: rotate(458.8deg);
}
.circle span:nth-child(75) {
transform: rotate(465deg);
}
.circle span:nth-child(76) {
transform: rotate(471.2deg);
}
.circle span:nth-child(77) {
transform: rotate(477.4deg);
}
.circle span:nth-child(78) {
transform: rotate(483.6deg);
}
.circle span:nth-child(79) {
transform: rotate(489.8deg);
}
.circle span:nth-child(80) {
transform: rotate(496deg);
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(-360deg);
}
}
body {
margin-top: 90px;
background: #000;
}
/*end*/
canvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid #;
}
</style>
<div class="circle">
<div class="rotate">
</span><span>♥</span><span> </span><span>m</span><span>y</span><span>s</span><span> </span><span>2</span><span>0</span><span>1</span><span>0</span><span></span><span>l</span><span>e</span><span>a</span><span>r</span><span>n</span><span> </span><span>h</span><span>o</span><span>w</span><span> </span><span>t</span><span>o</span><span> </span><span>d</span><span>e</span><span>s</span><span>i</span><span>g</span><span>n</span><span> </span><span>&</span><span> </span> <span>b</span> <span>u</span><span>i</span><span>l</span><span>d</span><span> </span><span>b</span><span>e</span><span>a</span><span>u</span><span>t</span><span>i</span><span>f</span><span>u</span><span>l</span><span> </span><span>w</span><span>e</span><span>b</span> <span>s</span><span>i</span><span>t</span><span>e</span><span>s</span><span>
</div>
</div>
<canvas id="canvas"></canvas>
<canvas id="canvas2"></canvas>
</head>
<body>
<script>
"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Particle = function () {
function Particle(x, y, size) {
_classCallCheck(this, Particle);
this.speed = 0.6;
this.x = x;
this.y = y;
this.vx = (Math.random() - 0.5) * this.speed;
this.vy = (Math.random() - 0.5) * this.speed;
this.opacity = 1;
this.size = size;
}
Particle.prototype.draw = function draw(context) {
this.opacity -= this.speed / 200;
context.fillStyle = this.color();
context.fillRect(this.x, this.y, this.size, this.size);
};
Particle.prototype.move = function move() {
this.x += this.vx;
// y speed is influenced by "gravity"
this.y += this.vy + (1 - this.opacity) * this.speed;
};
Particle.prototype.color = function color() {
return "rgba(0, 255, 0, " + this.opacity + ")";
};
return Particle;
}();
var Laser = function () {
function Laser(x, y) {
_classCallCheck(this, Laser);
this.x = x;
this.y = y;
this.steps = [];
this.particles = [];
}
Laser.prototype.drawTo = function drawTo(x, y, ctx) {
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(x, y);
ctx.stroke();
ctx.fillStyle = "red";
ctx.fillRect(x, y, 5, 5);
};
Laser.prototype.drawEnd = function drawEnd(ctx) {
var p = this.steps.shift();
if (p !== undefined) {
this.drawTo(p[0], p[1], ctx);
} else {
var index = this.particles.length;
// Loop through backwards so we can remove
// particles from the array inside the loop.
while (index--) {
var p = this.particles[index];
p.move();
if (p.opacity < 0 || p.x < 0 || p.x > this.w || p.y < 0 || p.y > this.h) {
this.particles.splice(index, 1);
} else {
p.draw(ctx);
}
}
}
};
Laser.prototype.endFrom = function endFrom(x0, y0) {
var nrOfSteps = 800;
var i = nrOfSteps;
while (i--) {
var x = this.x + i * (x0 - this.x) / nrOfSteps + Math.cos(i / 10) * i / 4;
var y = this.y + i * (y0 - this.y) / nrOfSteps + Math.sin(i / 10) * i / 4;
this.steps.push([x, y]);
if (i < 100) {
this.particles.push(new Particle(this.x, this.y, 2));
}
}
};
return Laser;
}();
var LaserWriter = function () {
function LaserWriter(canvasId, canvas2Id) {
_classCallCheck(this, LaserWriter);
// The first canvas holds the text being drawn (static).
var canvas = document.getElementById(canvasId);
// The second canvas holds the laser beam and particles
// (animated).
var canvas2 = document.getElementById(canvas2Id);
this.ctx = canvas.getContext("2d");
this.ctx2 = canvas2.getContext("2d");
this.w = canvas.width = canvas2.width = 900;
this.h = canvas.height = canvas2.height = 500;
this.tick = 0;
this.pointsIndex = 0;
this.points = [];
this.particles = [];
// All the points that make up the whole word
this.size = 3;
this.startX = 0;
this.laserStart = { x: 300, y: 50 };
this.x = 0;
this.y = 0;
}
LaserWriter.prototype.init = function init(text, size) {
this.ctx.font = size + "px serif";
// Draw black text on the canvas temporarily
this.startX = (this.w - this.ctx.measureText(text).width * 3) * 0.5;
this.ctx.fillText(text, 1, 100);
var width = 500;
var height = 300;
var image = this.ctx.getImageData(0, 0, width, height);
var buffer32 = new Uint32Array(image.data.buffer);
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
// The buffer is linear, y*w+x is a trick
// to calculate the linear index.
if (buffer32[y * width + x]) {
// There is a pixel here, add a point
this.points.push([x, y]);
}
}
}
// Clear the text once, we will just be adding
// to this canvas from now on (no clearing).
this.ctx.clearRect(0, 0, this.w, this.h);
this.ctx.fillStyle = "#000080";
// For the laser
this.ctx2.strokeStyle = "blue";
this.ctx2.lineCap = "round";
this.ctx2.lineWidth = 4;
this.laser = new Laser(this.laserStart.x, this.laserStart.y);
};
LaserWriter.prototype.draw = function draw() {
var _this = this;
this.ctx2.clearRect(0, 0, this.w, this.h);
// Continue drawing text?
if (this.pointsIndex < this.points.length) {
// Ok, we are not done
// Draw the text, one point at a time
var p = this.points[this.pointsIndex];
this.x = p[0] * this.size + this.startX;
this.y = p[1] * this.size + 170;
this.drawPointAt(this.x, this.y);
//this.drawLaserTo(x, y);
this.laser.drawTo(this.x, this.y, this.ctx2);
// Just add a particle every other tick
if (this.tick % 2 === 0) {
var particle = new Particle(this.x, this.y, this.size);
this.particles.push(particle);
}
} else if (this.pointsIndex === this.points.length) {
this.laser.endFrom(this.x, this.y);
} else {
this.laser.drawEnd(this.ctx2);
}
this.drawParticles();
this.pointsIndex++;
this.tick++;
// Keep the animation going a while after we have
// drawn all the text to let the last particles
// fall off the screen and the laser end animation
// run.
if (this.pointsIndex < this.points.length + 10000) {
// Draw three steps (ticks) then redraw screen
if (this.tick % 3 === 0) {
requestAnimationFrame(function () {
return _this.draw();
});
} else {
this.draw();
}
}
};
LaserWriter.prototype.drawPointAt = function drawPointAt(x, y) {
this.ctx.beginPath();
this.ctx.arc(x, y, this.size * 1, 0, Math.PI * 2, false);
this.ctx.fill();
};
LaserWriter.prototype.drawParticles = function drawParticles() {
var index = this.particles.length;
// Loop through backwards so we can remove
// particles from the array inside the loop.
while (index--) {
var p = this.particles[index];
p.move();
if (p.opacity < 0 || p.x < 0 || p.x > this.w || p.y < 0 || p.y > this.h) {
this.particles.splice(index, 1);
} else {
p.draw(this.ctx2);
}
}
};
return LaserWriter;
}();
var laserWriter = new LaserWriter("canvas", "canvas2");
laserWriter.init("Soforthilfe-Forum.de", 20);
laserWriter.draw();
</script>