DJ de introdução

1272 tousgreg

Abrir no Editor Video Publique Seu Código

Recomendado

22 May 2025

Jogo de fuga

16 September 2025

Fluxo de dados de animação de coração em HTML

26 June 2025

Site de comércio eletrônico HTML, Tailwind CSS, compras

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: black;
  font-family: 'Orbitron', sans-serif;
  color: white;
}

canvas#visualizer {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: black;
}

.intro {
  position: relative;
  z-index: 2;
  text-align: center;
  top: 30%;
  transform: translateY(-30%);
  animation: fadeIn 2s ease-in-out;
}

#dj-name {
  font-size: 4em;
  letter-spacing: 0.2em;
  text-shadow: 0 0 20px #ff00cc, 0 0 40px #00ffff;
  animation: neonGlow 2s infinite alternate;
}

.subtext {
  font-size: 1.2em;
  margin-top: 10px;
  opacity: 0.8;
}

.controls {
  margin-top: 30px;
}

button {
  padding: 10px 20px;
  font-size: 1em;
  margin: 0 10px;
  border: none;
  border-radius: 10px;
  background: #222;
  color: white;
  cursor: pointer;
  box-shadow: 0 0 10px #0ff;
  transition: background 0.3s;
}

button:hover {
  background: #0ff;
  color: #000;
}

@keyframes neonGlow {
  0% { text-shadow: 0 0 10px #ff00cc; }
  100% { text-shadow: 0 0 30px #00ffff; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

JS

const audio = document.getElementById('intro-audio');
const muteBtn = document.getElementById('mute-btn');
const enterBtn = document.getElementById('enter-btn');

// Audio toggle
muteBtn.addEventListener('click', () => {
  audio.muted = !audio.muted;
  muteBtn.textContent = audio.muted ? '??' : '??';
});

// Redirection personnalisée
enterBtn.addEventListener('click', () => {
  console.log("Entrer cliqué");
  window.location.href = 'https://www.google.com';
});

// Canvas visualizer
const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const source = audioCtx.createMediaElementSource(audio);
const analyser = audioCtx.createAnalyser();
source.connect(analyser);
analyser.connect(audioCtx.destination);
analyser.fftSize = 256;

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

function draw() {
  requestAnimationFrame(draw);
  analyser.getByteFrequencyData(dataArray);

ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

const barWidth = (canvas.width / bufferLength) * 2.5;
  let x = 0;

for (let i = 0; i < bufferLength; i++) {
    const barHeight = dataArray[i];
    const r = barHeight + 25 * (i / bufferLength);
    const g = 250 * (i / bufferLength);
    const b = 50;

ctx.fillStyle = `rgb(${r},${g},${b})`;
    ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);

Recomendado

Jogo de fuga

Fluxo de dados de animação de coração em HTML

Site de comércio eletrônico HTML, Tailwind CSS, compras

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS