テキスト
JavaScript

Neon Flicker Text

ネオンサインのようにランダムにちらつく文字アニメーション。

HTML
<h2 class="nft-text" id="nft-text">NEON SIGN</h2>
CSS
.nft-text {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #ec4899;
  text-shadow: 0 0 10px #ec4899, 0 0 20px #ec4899, 0 0 40px #be185d;
}
.nft-char {
  display: inline-block;
  transition: opacity 0.05s;
}
.nft-char.dim {
  opacity: 0.3;
  text-shadow: none;
}
JavaScript
const text = document.getElementById('nft-text');
const chars = text.textContent.split('');
text.textContent = '';
chars.forEach(function(ch) {
  const span = document.createElement('span');
  span.classList.add('nft-char');
  span.textContent = ch === ' ' ? '\u00A0' : ch;
  text.appendChild(span);
});
const spans = text.querySelectorAll('.nft-char');
setInterval(function() {
  const idx = Math.floor(Math.random() * spans.length);
  spans[idx].classList.add('dim');
  setTimeout(function() { spans[idx].classList.remove('dim'); }, 100 + Math.random() * 200);
}, 150);