Webleb - Snippets de Código - DJ de introdução

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);

DJ de introdução

Recomendado

Jogo de cara ou coroa

PLACA DE CONEXÃO

Golpe de boneco de pano

HTML

CSS

JS

Recomendado

Jogo de cara ou coroa

PLACA DE CONEXÃO

Golpe de boneco de pano

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS