DJ de introdução

338 tousgreg

Abrir no Editor Publique Seu Código Precisa de um site?

Recomendado

6 October 2024

Efeito de embaralhamento de texto

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

Marca de entrada

social moderno

Efeito de embaralhamento de texto

HTML

CSS

JS

Recomendado

Marca de entrada

social moderno

Efeito de embaralhamento de texto

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS