Загрузить файлы в «frogs»

frogs/frogs.js

@@ -0,0 +1,153 @@
+const audio = document.getElementById('bg-music');
+
+const container = document.getElementById('frog-container');
+const menuHeight = document.querySelector('header').offsetHeight;
+const startText = document.getElementById('start-text');
+const startString = "Нажми в любую часть экрана";
+
+const particlesContainer = document.querySelector('.particles');
+const particleCount = 60;
+for (let i = 0; i < particleCount; i++) {
+  const particle = document.createElement('div');
+  particle.classList.add('particle');
+  const size = Math.random() * 8 + 2;
+  const posX = Math.random() * 100;
+  const posY = Math.random() * 100;
+  const duration = Math.random() * 5 + 5;
+  const baseColor = 200;
+  const variation = Math.random() * 20 - 10;
+  particle.style.background = `hsl(${baseColor + variation}, 100%, 50%)`;
+  particle.style.width = size + 'px';
+  particle.style.height = size + 'px';
+  particle.style.left = posX + '%';
+  particle.style.top = posY + '%';
+  particle.style.animationDuration = `${duration}s`;
+  particlesContainer.appendChild(particle);
+}
+
+const totalFrogs = 33;
+const frogs = [];
+const occupiedZones = [];
+let typingTimers = [];
+
+function checkOverlap(pos, zones) {
+  return zones.some(zone =>
+    pos.x < zone.x + zone.w &&
+    pos.x + pos.w > zone.x &&
+    pos.y < zone.y + zone.h &&
+    pos.y + pos.h > zone.y
+  );
+}
+
+function getRandomPosition(frog) {
+  const w = frog.el.offsetWidth;
+  const h = w;
+  const x = Math.random() * (window.innerWidth - w);
+  const y = Math.random() * (window.innerHeight - h - menuHeight) + menuHeight;
+  return { x, y, w, h };
+}
+
+function placeFrog(frog) {
+  let pos, attempts = 0;
+  do {
+    pos = getRandomPosition(frog);
+    attempts++;
+    if (attempts > 100) break;
+  } while (checkOverlap(pos, occupiedZones));
+  occupiedZones.push(pos);
+  frog.el.style.left = pos.x + 'px';
+  frog.el.style.top = pos.y + 'px';
+}
+
+function teleportFrogsSync() {
+  const zones = [];
+  frogs.forEach(frog => {
+    let pos, attempts = 0;
+    do {
+      pos = getRandomPosition(frog);
+      attempts++;
+      if (attempts > 100) break;
+    } while (checkOverlap(pos, zones));
+    zones.push(pos);
+    frog.el.style.left = pos.x + 'px';
+    frog.el.style.top = pos.y + 'px';
+  });
+}
+
+function startTeleportationLoop() {
+  setInterval(teleportFrogsSync, 1000);
+}
+
+function createFrog() {
+  const frog = document.createElement('img');
+  frog.src = '../assets/frog.gif';
+  frog.classList.add('frog');
+  if (Math.random() < 0.5) frog.style.transform = 'scaleX(-1)';
+  frog.style.opacity = 0;
+  container.appendChild(frog);
+
+  frog.onload = () => {
+    const sizePx = window.innerWidth * (0.05 + Math.random() * 0.05);
+    frog.style.width = sizePx + 'px';
+    frog.style.height = 'auto';
+    requestAnimationFrame(() => {
+      placeFrog({ el: frog });
+      const delay = Math.random() * 1300 + 200;
+      setTimeout(() => { frog.style.transition = `opacity ${delay}ms linear`; frog.style.opacity = 1; }, Math.random() * 1500);
+    });
+  };
+  return { el: frog };
+}
+
+function typeWriterEffect(text, container, delay = 50) {
+  typingTimers.forEach(t => clearTimeout(t));
+  typingTimers = [];
+  container.innerHTML = '';
+  [...text].forEach(char => {
+    const span = document.createElement('span');
+    span.textContent = char === ' ' ? '\u00A0' : char;
+    container.appendChild(span);
+  });
+  const spans = container.querySelectorAll('span');
+  spans.forEach((span, i) => {
+    const timer = setTimeout(() => { span.style.opacity = 1; }, i * delay);
+    typingTimers.push(timer);
+  });
+}
+
+function reverseTypeWriter(container, delay = 50, callback) {
+  typingTimers.forEach(t => clearTimeout(t));
+  typingTimers = [];
+  const spans = Array.from(container.querySelectorAll('span')).reverse();
+  spans.forEach((span, i) => { setTimeout(() => { span.style.opacity = 0; }, i * delay); });
+  setTimeout(callback, spans.length * delay + 50);
+}
+
+let started = false;
+let typingInProgress = false;
+
+document.addEventListener('click', () => {
+  if (started || typingInProgress) return;
+
+  typingInProgress = true;
+
+  reverseTypeWriter(startText, 40, () => {
+    typingInProgress = false;
+    started = true;
+
+    audio.play().catch(() => {});
+    for (let i = 0; i < totalFrogs; i++) {
+      frogs.push(createFrog());
+    }
+    startTeleportationLoop();
+  });
+});
+
+typeWriterEffect(startString, startText, 40);
+
+window.addEventListener('resize', () => {
+  frogs.forEach(frog => {
+    const size = window.innerWidth * (0.05 + Math.random() * 0.05);
+    frog.el.style.width = size + 'px';
+  });
+});

frogs/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>treywisp — frogs</title>
+    <link rel="icon" type="image/png" href="../assets/icon.png">
+    <link rel="apple-touch-icon" href="../assets/icon.png">
+    <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+<header>
+    <nav>
+        <a href="/">HOME</a>
+        <a href="/frogs">FROGS</a>
+        <a href="/serega">SEREGA</a>
+        <a href="https://t.me/treywisp" target="_blank">TELEGRAM</a>
+        <a href="/git/treywisp" class="button">GIT</a>
+  </nav>
+</header>
+
+    <div class="particles"></div>
+    <section class="content"></section>
+    <div id="frog-container"></div>
+    <div id="start-text"></div>
+    <audio id="bg-music" src="../assets/music.mp3" loop></audio>
+
+    <script src="frogs.js"></script>
+</body>
+</html>