Форма ввода имени на Хеллоуин для сайта

Автор использует HTML, CSS и jаvascript для создания кода. В этом проекте автор просит пользователя ввести свое имя. После ввода нашего имени и нажатия клавиши «Ввод» код преобразует имя во множество пауков, которые уползают с экрана. Сниппетом можно украсить сайт к тематическому празднику Хеллоуин.

HTML

<form class="terrible-text" id="terrible-text">
  <label for="name">Your Halloween Name: </label>
  <div><input id="name" type="text" placeholder="make it spooookyyy!"></div>
</form>

CSS(SCSS)

body,
html {
  height: 100%;
  //display: grid;
  overflow: hidden;
}
html {
  font-size: 400%;
}
body {
  background-color: #999;
  margin: 0;
}

.terrible-text {
  margin: auto;
  padding: 72px;
  font-family: "Creepster", cursive;
  position: relative;
}
.terrible-text div {
  position: relative;
}
input {
  font-size: inherit;
  padding: 0;
  vertical-align: top;
  line-height: 1;
  border: none;
  border-bottom: 10px solid black;
  background: transparent;
  transition: 0.5s 0s;
  max-width: 100%;
}
input:focus {
  outline: none;
}

canvas {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  pointer-events: none;
}

.submitted input {
  color: transparent;
}

body:after {
  //content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  clip-path: polygon(
    0% 30%,
    0% 100%,
    100% 100%,
    100% 25%,
    80% 25%,
    60% 45%,
    55% 35%
  );
  height: calc(100vh - 100px);
}

JS(Babel)

const img = new Image(); // Create new img element
img.src =
  "dаta:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='1114.000000pt' height='1280.000000pt' viewBox='0 0 1114.000000 1280.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cmetadata%3E%0ACreated by potrace 1.15, written by Peter Selinger 2001-2017%0A%3C/metadata%3E%3Cg transform='translate(0.000000,1280.000000) scale(0.100000,-0.100000)'%0Afill='%23000000' stroke='none'%3E%3Cpath d='M7220 12790 c0 -64 246 -623 668 -1520 316 -671 320 -680 335 -680 9%0A0 12 -9 9 -30 -2 -17 1 -49 6 -73 10 -38 -5 -123 -157 -882 -101 -506 -173%0A-841 -180 -843 -23 -8 -72 -55 -87 -84 -8 -16 -21 -60 -28 -96 -12 -64 -30%0A-92 -400 -647 -214 -319 -385 -569 -382 -555 79 362 74 833 -15 1185 -168 667%0A-558 1109 -1016 1154 -236 23 -472 -65 -681 -254 -383 -348 -612 -1069 -551%0A-1735 27 -307 111 -625 219 -839 l31 -63 -33 7 c-18 4 -34 8 -34 9 -1 0 -144%0A323 -318 716 -175 393 -324 720 -332 726 -8 6 -14 24 -14 40 0 16 -9 49 -21%0A73 -11 26 -16 47 -10 50 9 6 -41 280 -259 1411 -109 565 -109 563 -50 1105 22%0A209 54 504 70 655 16 151 48 446 70 655 23 209 44 409 47 445 l6 65 -112 -223%0Ac-112 -225 -145 -309 -180 -462 -61 -268 -123 -754 -167 -1314 -16 -201 -17%0A-211 -44 -248 -38 -53 -53 -123 -39 -188 10 -47 32 -82 87 -137 12 -12 22 -29%0A22 -37 0 -13 43 -314 199 -1384 41 -275 59 -427 55 -456 -12 -87 55 -205 125%0A-221 26 -5 60 -66 389 -691 353 -670 360 -685 350 -721 -21 -75 23 -188 82%0A-215 37 -16 39 -28 5 -28 -21 0 -1468 435 -1703 511 -62 21 -63 21 -57 53 5%0A24 2 36 -12 49 -17 15 -31 16 -119 7 -109 -10 -784 -11 -1102 -1 -112 3 -206%0A4 -208 1 -3 -2 -38 -4 -79 -5 -73 0 -75 1 -86 28 -7 15 -17 26 -24 23 -12 -4%0A-1444 -1114 -1475 -1142 -12 -12 -12 -16 0 -28 13 -12 117 43 775 415 620 350%0A767 429 797 429 20 0 48 4 62 10 19 7 37 5 68 -8 39 -15 98 -17 608 -17 432 0%0A570 -3 587 -13 30 -17 78 -15 115 4 35 18 20 21 248 -39 96 -24 220 -55 275%0A-67 55 -12 147 -38 205 -58 124 -41 574 -216 848 -330 174 -72 196 -84 232%0A-125 23 -26 53 -48 69 -52 28 -6 459 -180 468 -188 2 -3 -30 -34 -71 -71 -87%0A-78 -395 -407 -414 -442 l-13 -25 -30 21 c-16 12 -33 20 -38 18 -4 -2 -79 -84%0A-167 -183 -219 -249 -408 -457 -548 -604 -128 -135 -171 -193 -187 -256 -10%0A-40 -11 -40 -49 -37 -83 8 -170 -62 -170 -136 0 -29 -25 -60 -213 -260 -255%0A-270 -498 -508 -622 -607 -107 -85 -119 -99 -112 -124 4 -15 -1 -21 -23 -26%0A-15 -3 -42 -21 -61 -41 -25 -26 -33 -43 -33 -72 0 -20 3 -44 7 -52 5 -10 -46%0A-107 -149 -285 -178 -309 -361 -615 -414 -695 -20 -30 -40 -62 -44 -70 -9 -17%0A-17 -27 299 345 127 148 306 357 398 464 92 107 167 198 167 202 0 5 -4 9 -9%0A9 -5 0 0 17 11 38 18 36 19 57 3 96 -8 17 -5 19 32 13 l41 -7 437 458 c252%0A263 448 461 464 466 70 24 83 31 112 63 26 30 30 42 28 84 l-3 49 494 475%0Ac430 413 498 475 525 475 88 0 162 56 172 129 4 28 10 40 18 37 7 -2 48 18 90%0A45 67 43 76 47 61 24 -84 -128 -208 -372 -201 -395 7 -24 -4 -45 -25 -45 -10%0A0 -64 -114 -167 -355 -162 -377 -223 -503 -311 -640 -57 -90 -147 -200 -188%0A-232 -29 -23 -31 -38 -4 -38 18 0 18 -2 -6 -37 -14 -21 -28 -51 -31 -66 -4%0A-21 -11 -27 -25 -25 -22 3 -4 63 -247 -807 -73 -258 -146 -510 -162 -560 -42%0A-124 -127 -285 -214 -407 -50 -72 -68 -104 -58 -106 8 -2 12 -10 9 -19 -3 -8%0A-6 -26 -6 -39 0 -17 -6 -24 -19 -24 -16 0 -23 -17 -45 -107 -45 -190 -346%0A-1499 -346 -1505 0 -3 8 -8 18 -10 17 -5 56 91 311 755 232 603 298 766 322%0A789 34 35 43 65 36 119 -5 36 -3 39 18 39 13 0 26 8 30 18 3 9 136 366 295%0A792 158 426 298 800 309 830 15 39 31 62 56 79 49 33 79 99 73 162 -5 47 -4%0A50 16 45 20 -5 31 23 165 387 308 843 288 792 325 809 31 15 66 68 66 100 0 8%0A27 54 60 102 33 48 82 124 109 170 l47 84 -4 -53 c-5 -67 12 -145 48 -213 27%0A-50 28 -57 23 -147 -7 -110 2 -132 68 -166 72 -36 102 -10 111 96 2 24 7 29%0A23 27 92 -12 126 -12 173 1 60 16 57 18 67 -55 11 -82 50 -98 123 -51 58 38%0A69 79 49 187 -13 74 -13 82 4 110 40 68 58 213 34 279 -3 6 3 22 13 35 l18 23%0A39 -70 c30 -55 41 -68 51 -60 10 8 20 4 39 -19 14 -17 35 -34 46 -37 13 -4 18%0A-12 15 -22 -4 -8 20 -56 55 -111 99 -158 132 -239 233 -577 111 -374 192 -657%0A201 -709 4 -20 15 -41 24 -46 26 -14 -6 123 362 -1520 55 -245 102 -453 105%0A-462 3 -10 14 -18 25 -18 15 0 19 -7 19 -31 0 -34 13 -64 43 -97 13 -14 88%0A-237 212 -635 171 -547 194 -612 211 -609 10 2 20 5 20 5 1 1 -2 31 -7 67 -9%0A71 -59 481 -114 943 -48 401 -39 361 -85 353 -32 -5 -38 -3 -43 14 -3 11 -1%0A36 4 56 19 68 -21 223 -119 461 -99 240 -193 596 -328 1241 -24 117 -44 225%0A-44 240 0 15 -9 42 -20 60 -11 18 -20 39 -20 46 0 7 -11 38 -24 67 -34 78%0A-235 666 -366 1074 -69 214 -121 359 -134 373 -32 36 -72 53 -127 54 l-49 0%0A20 29 c29 40 37 43 66 24 25 -16 27 -16 41 5 15 21 15 21 58 -19 24 -22 63%0A-49 87 -61 23 -13 262 -159 531 -327 268 -167 493 -303 500 -300 6 2 17 -9 24%0A-24 6 -15 28 -38 48 -51 32 -20 71 -91 358 -648 295 -573 324 -625 349 -628%0A25 -3 26 -5 17 -35 -5 -18 -9 -48 -8 -67 1 -55 242 -942 257 -948 7 -2 17 -1%0A22 4 10 10 -33 1000 -44 1026 -5 11 -2 17 8 20 20 4 -763 1328 -794 1343 -12%0A6 -20 20 -20 33 0 36 -61 92 -99 92 -24 0 -31 4 -29 17 2 12 -132 113 -467%0A354 -358 258 -475 347 -492 376 -31 53 -61 73 -112 73 -36 0 -41 2 -32 14 10%0A11 1 21 -46 49 -74 44 -207 111 -256 128 -51 18 -48 50 6 61 51 11 111 42 179%0A94 66 52 158 151 158 173 0 9 18 24 39 34 21 10 50 35 64 55 24 36 31 40 143%0A70 66 18 182 50 259 71 77 21 298 82 490 136 193 53 431 119 530 147 99 27%0A248 68 330 90 83 22 162 48 178 59 27 19 27 19 27 0 0 -11 6 -23 13 -28 6 -4%0A331 -155 722 -336 646 -298 711 -326 722 -311 14 20 17 19 35 -17 7 -14 161%0A-219 342 -456 284 -373 331 -431 347 -422 16 8 10 24 -64 167 -45 86 -167 322%0A-272 524 -104 202 -194 366 -200 365 -5 -1 -22 7 -38 17 -15 10 -36 16 -48 13%0A-16 -4 -19 -1 -17 15 3 24 88 -14 -956 424 -308 130 -573 243 -589 252 -69 39%0A-80 44 -112 44 -17 0 -47 -8 -66 -18 -19 -10 -41 -19 -49 -20 -14 -1 -575%0A-173 -795 -244 -49 -16 -252 -79 -450 -140 -198 -61 -416 -129 -484 -151 -68%0A-21 -131 -39 -140 -39 -9 0 -28 -8 -42 -18 -15 -9 -88 -59 -162 -109 l-136%0A-93 -8 53 c-4 28 -8 55 -8 58 0 3 50 46 110 96 106 87 255 234 255 252 0 4 21%0A11 46 14 59 6 106 50 136 128 13 32 223 365 467 741 351 541 450 686 475 699%0A21 10 41 35 61 73 24 49 30 72 32 140 2 69 39 231 236 1019 129 515 231 937%0A227 937 -4 0 -10 28 -13 63 -3 34 -13 78 -21 98 -8 20 -11 40 -7 45 5 5 -71%0A141 -170 304 -132 217 -221 380 -337 615 -277 561 -425 809 -612 1030 -70 83%0A-150 154 -150 135z m-1844 -6512 c4 -6 -2 -7 -17 -3 -35 10 -45 23 -15 18 15%0A-3 29 -10 32 -15z m1184 -774 c0 -6 -4 -4 -77 43 -29 19 -53 38 -53 43 0 5 29%0A-11 65 -36 36 -25 65 -48 65 -50z'/%3E%3C/g%3E%3C/svg%3E%0A";
function easeInExpo(x) {
  return x === 0 ? 0 : Math.pow(2, 10 * x - 10);
}
class TextDesintegrator {
  constructor(el, form, options) {
    const defaultOptions = {
      padding: 150,
      density: 5,
      duration: 6000 // in ms
    };
    this.form = form;
    this.step = 0;
    this.data = [];
    this.scale = 2; // pixel density
    this.el = el;
    this.el.style.position = "relative";
    this.inner = this.el.querySelector("span");
    this.options = { ...defaultOptions, ...options };
    this.createCanvas();
    this.form.addEventListener("submit", (e) => {
      e.preventDefault();
      this.fillCanvas();
      this.start();
      this.form.classList.add("submitted");
    });
  }
  createCanvas() {
    // get the width and the height of the element
    // canvas will have the same dimensions
    const { width, height } = this.el.getBoundingClientRect();
    this.height = height;
    this.width = width;
    this.canvas = document.createElement("canvas");
    this.canvas.width = this.scale * (this.width + 2 * this.options.padding);
    this.canvas.height = this.scale * (this.height + 2 * this.options.padding);
    this.canvas.style.width = `${this.width + 2 * this.options.padding}px`;
    this.canvas.style.height = `${this.height + 2 * this.options.padding}px`;
    this.canvas.style.transform = `translate3d(${-this.options
      .padding}px, ${-this.options.padding}px, 0)`;
    this.context = this.canvas.getContext("2d");
    this.context.scale(this.scale, this.scale);
    this.el.after(this.canvas);
  }
  clearContext() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
  fillCanvas() {
    const style = getComputedStyle(this.el);
    this.color = "rgb(0, 0, 0)";
    this.context.fillStyle = this.color;
    this.context.globalAlpha = 1;
    this.context.font = style.getPropertyValue("font");
    this.context.textBaseline = "ideographic";
    this.clearContext();
    this.context.fillText(
      this.el.value,
      this.options.padding,
      (this.canvas.height / this.scale + this.height) / 2 - 10
    );
  }
  start() {
    this.t0 = 0;
    this.fillCanvas();
    this.pixelize();
    this.render();
  }
  pixelize() {
    this.data = [];
    const { padding, density, duration } = this.options;
    for (
      let y = 0;
      y < this.canvas.height + 2 * padding - Math.floor(density / 2);
      y += density
    ) {
      for (
        let x = 0;
        x < this.canvas.width + 2 * padding - Math.floor(density / 2);
        x += density
      ) {
        const { data } = this.context.getImageData(
          x + Math.floor(density / 4),
          y + Math.floor(density / 4),
          1,
          1
        );
        const [, , , a] = data;
        if (a > 0) {
          this.data.push({
            alpha: a / 255,
            longevity: Math.min(
              duration * 0.25 + Math.random() * duration * 0.75,
              duration - 100
            ),
            x,
            y,
            initialX: x,
            initialY: y,
            finalX: x + 2 * (Math.random() - 0.5) * this.canvas.width,
            finalY: y + 2 * (Math.random() - 0.5) * this.canvas.width
          });
        }
      }
    }
  }

  render(timestamp = 0) {
    if (!this.t0) {
      this.t0 = timestamp;
    }
    const elapsed = timestamp - this.t0;
    this.step = elapsed;
    this.updateData();
    this.clearContext();

    for (const sq of this.data) {
      this.context.globalAlpha = sq.alpha;
      this.context.fillStyle = this.color;
      this.context.drawImage(
        img,
        sq.x / 2 + (sq.x / 2) * 0.05 * (Math.random() - 0.5),
        sq.y / 2 -
          this.options.density +
          (sq.y / 2) * 0.05 * (Math.random() - 0.5),
        this.options.density * 2 * (1 + (3 * elapsed) / this.options.duration),
        0.5 *
          this.options.density *
          2 *
          (1 + (3 * elapsed) / this.options.duration)
      );
    }
    this.canvas.style.transformOrigin = "100px 100px";
    this.canvas.style.filter = `blur(${
      1 * easeInExpo(elapsed / this.options.duration)
    }px)`;
    this.canvas.style.transform = `translate3d(${-this.options
      .padding}px, ${-this.options.padding}px, 0) scale(${
      1 + 1 * easeInExpo(elapsed / this.options.duration)
    })`;
    if (elapsed > this.options.duration) {
      this.onComplete();
    } else {
      requestAnimationFrame((t) => this.render(t));
    }
  }
  onComplete() {
    if (this.id) {
      window.cancelAnimationFrame(this.id);
    }
    this.data = [];
    this.form.classList.remove("submitted");
    this.form.reset();
  }
  updateData() {
    for (const sq of this.data) {
      sq.alpha = this.calculateOpacity(sq.longevity, this.step);
      sq.x = this.calculatePosition(
        sq.initialX,
        sq.finalX,
        sq.longevity,
        this.step
      );
      sq.y = this.calculatePosition(
        sq.initialY,
        sq.finalY,
        sq.longevity,
        this.step
      );
    }
  }
  calculatePosition(xS, xE, l, x) {
    const expo = (l, x) => {
      return x < l ? 1 - Math.pow(2, 15 * (x / l) - 15) : 0;
    };
    const val = (xS - xE) * expo(l, x) + xE;
    return val;
  }
  calculateOpacity(l, x) {
    return x <= l ? 1 - Math.pow(x / l, 3) : 0;
  }
}

const form = document.querySelector("#terrible-text");
const target = form.querySelector("input");
const spooky = new TextDesintegrator(target, form);