Webleb - UI Elements

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

intro D.J

Recommended

Netflix Intro Animation Pure CSS

HTML

CSS

JS

Recommended

Netflix Intro Animation Pure CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS