DJ de introdução

1268 tousgreg

Abrir no Editor Video Publique Seu Código

Recomendado

16 May 2025

Um código por DEME

16 January 2026

Modelo HTML para reprodutor de jogos Flash Ruffle

21 July 2025

Entrada de upload de arquivo com ícone SVG

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

Um código por DEME

Modelo HTML para reprodutor de jogos Flash Ruffle

Entrada de upload de arquivo com ícone SVG

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS