#screen {
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
}
#rain {
  position: absolute;
  font-family: 'Courier New', monospace;
  color: #0F0;
  animation: rain 1500ms linear infinite;
}

@keyframes rain {
  0% {
    transform: translateY(100%);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
</style><script>
const screen = document.createElement('div');
screen.id = 'screen';
document.body.appendChild(screen);

const rain = document.createElement('span');
rain.id = 'rain';
screen.appendChild(rain);

for (let i = 0; i < 100; i++) {
  rain.appendChild(document.createTextNode(
    `${'ァァィィゥゥエエォォ(KeyEvent
        対応UITableViewCellStyle'
  `);
}

const step = 50;
for (let i = 0; i < rain.children.length; i++) {
  rain.children[i].style.position = 'absolute';
  rain.children[i].style.transform = `translateY(-${i * step}px)`;
  rain.children[i].style.animationDelay = `${i * 10ms`;
}

function update() {
  let opacity = Math.sin(Date.now() * 0.01);
  rain.style.opacity = opacity;
  rain.style.transform = `translateY(-${0}px)`;
  opacity = Math.sin((Date.now() - 500) * 0.01);
  screen.style.opacity = opacity;
}
setInterval(update, 16);</script>