sunmeat/index.html

## index.html
<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Transition Text</title>
  <style>
    body {
      background-color: black;
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Calibri', sans-serif;
    }
    p {
      font-size: 250px;
      color: rgb(0, 255, 0); /* початковий колір - зелений */
      margin: 0;
      user-select: none;
    }
  </style>
</head>
<body>
<p id="p1">TEXT</p>
<script>
  const colors = [
    { r: 0, g: 255, b: 0 },     // Green
    { r: 0, g: 255, b: 255 },   // Cyan
    { r: 0, g: 0, b: 255 },     // Blue
    { r: 255, g: 0, b: 255 },   // Pink
    { r: 255, g: 255, b: 255 }, // White
    { r: 0, g: 0, b: 0 }        // Black
  ];

  let currentColorIndex = 0;
  let nextColorIndex = 1;
  let progress = 0;
  const transitionDuration = 2000;

  function animate(start, end, t) {
    return start + (end - start) * t;
  }

  let lastTime = null;

  function updateColor(timestamp) {
    if (!lastTime) lastTime = timestamp;
    const delta = timestamp - lastTime;
    progress += delta / transitionDuration;

    if (progress >= 1) {
      progress = 0;
      currentColorIndex = nextColorIndex;
      nextColorIndex = (nextColorIndex + 1) % colors.length;
      lastTime = timestamp;
    }

    const current = colors[currentColorIndex];
    const next = colors[nextColorIndex];
    const r = Math.round(animate(current.r, next.r, progress));
    const g = Math.round(animate(current.g, next.g, progress));
    const b = Math.round(animate(current.b, next.b, progress));

    document.getElementById('p1').style.color = `rgb(${r},${g},${b})`;

    requestAnimationFrame(updateColor);
  }

  requestAnimationFrame(updateColor);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="uk">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Color Transition Text</title>
	<style>
	body {
	background-color: black;
	margin: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Calibri', sans-serif;
	}
	p {
	font-size: 250px;
	color: rgb(0, 255, 0); /* початковий колір - зелений */
	margin: 0;
	user-select: none;
	}
	</style>
	</head>
	<body>
	<p id="p1">TEXT</p>
	<script>
	const colors = [
	{ r: 0, g: 255, b: 0 }, // Green
	{ r: 0, g: 255, b: 255 }, // Cyan
	{ r: 0, g: 0, b: 255 }, // Blue
	{ r: 255, g: 0, b: 255 }, // Pink
	{ r: 255, g: 255, b: 255 }, // White
	{ r: 0, g: 0, b: 0 } // Black
	];

	let currentColorIndex = 0;
	let nextColorIndex = 1;
	let progress = 0;
	const transitionDuration = 2000;

	function animate(start, end, t) {
	return start + (end - start) * t;
	}

	let lastTime = null;

	function updateColor(timestamp) {
	if (!lastTime) lastTime = timestamp;
	const delta = timestamp - lastTime;
	progress += delta / transitionDuration;

	if (progress >= 1) {
	progress = 0;
	currentColorIndex = nextColorIndex;
	nextColorIndex = (nextColorIndex + 1) % colors.length;
	lastTime = timestamp;
	}

	const current = colors[currentColorIndex];
	const next = colors[nextColorIndex];
	const r = Math.round(animate(current.r, next.r, progress));
	const g = Math.round(animate(current.g, next.g, progress));
	const b = Math.round(animate(current.b, next.b, progress));

	document.getElementById('p1').style.color = `rgb(${r},${g},${b})`;

	requestAnimationFrame(updateColor);
	}

	requestAnimationFrame(updateColor);
	</script>
	</body>
	</html>
No results found