JSFiddle - React, Tailwind, and code Playground

by Joshua Dwire

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<iframe width="1280" height="715" frameborder="0" allowfullscreen="" src="https://player.vimeo.com/video/219282264?autoplay=1&amp;loop=1&amp;color=315f0d&amp;title=0&amp;byline=0&amp;portrait=0"></iframe>
<p style="text-align:right">
Please proceed to the check-in window if your number is
<span id="mainnumber">96</span> or below.
</p>
<span id="bignumber"><span>96</span></span>

CSS

#bignumber {
  font-size: 150%;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: center;
  text-shadow: 0 0 1px #000, 0 0 2px #000;
  transition: transform 2s, opacity 3s ease-in;
  width: 0;
  height: 0;
}

#bignumber span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}

#bignumber.transitioning {
  display: block;
}

#mainnumber {
  position: relative;
  font-size: 150%;
}

@keyframes grow {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(10);
    opacity: 0.8;
  }
  100% {
    transform: scale(10);
    opacity: 0;
  }
}

body {
  background: #000;
  color: #fff;
  font-size: 30px;
  position: relative;
}

JavaScript

var done = false;
window.speechSynthesis.onvoiceschanged = function() {
  setTimeout(function() {
    if (done) return;
    done = true;
    var msg = new SpeechSynthesisUtterance('Now Serving Number 96');

    msg.voice = speechSynthesis.getVoices().filter(function(voice) {
      return voice.name == 'Google UK English Female';
    })[0];
    console.log(msg.voice);
    console.log(speechSynthesis.getVoices());
    window.speechSynthesis.speak(msg)
    animateNumber();
  }, 5000)
}

function animateNumber() {
  var offsetStart = $('#mainnumber').position();
  offsetStart.left += $('#mainnumber').width() / 2;
  offsetStart.top += $('#mainnumber').height() / 2;
  var offsetEnd = {
    left: $('iframe').width() / 2,
    top: $('iframe').height() / 2
  };
  $('#bignumber')
    .css({
      transform: 'translate(' + offsetStart.left + 'px, ' + offsetStart.top + 'px) scale(1)'
    })
    .addClass('transitioning');

  setTimeout(function() {
    $('#bignumber').css({
      transform: 'translate(' + offsetEnd.left + 'px, ' + offsetEnd.top + 'px) scale(10)'
    })
    setTimeout(function(){
        $('#bignumber').css({opacity:0});
    }, 1000)
  }, 100);
}