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>&#9829;</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>&#38;</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>