Why I wanna be with you

by surfine

HTML

<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;700&display=swap" rel="stylesheet">

<div class="centered noselect">
  <div class="uno">
    So, you asked me why I wanna be with you
  </div>
  <div class="dos">
    I wanna be with you because you're so
  </div>
  <div class="adj" data-id="0">&nbsp;</div>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  color: #455A64;
  font-family: 'Kumbh Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  background: #E1F5FE;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  line-height: 1.5em;
}

.adj {
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1.5em;
  opacity: 0;
}

.cenered,
.adj {
  width: 100%;
}

.uno,
.dos
.tres {
  display: none;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

JavaScript

$(document).ready(function() {
  var adj = [
    "a-dora-bowl!",
    "adventurous!",
    "amazing!",
    "attractive!",
    "awe-inspiring!",
    "awesome!",

    "beautiful!",
    "bewitching!",
    "breathtaking!",
    "brilliantly smexy!",
    "bubbly!",
    

    "charismatic!",
    "charming!",
    "comfy! :3",
    "cuddly!",
    "cute!",

    "dazzling!",
    "delicious! ;)",
    "delightful!",
    "divine!",
    "dreamy! ;)",

    "elegant!",
    "enchanting!",
    "etherial!",
    "exhilarating!",
    "extraordinary!",
    "exquisite!",

    "fabulous!",
    "fascinating!",
    "fucking pretty!", /**/
    "fun!",

    "gleaming!",
    "goldy! :3", /**/
    "gorgeous!",
    
    
    "hawt! :3",
    "intriguing!",
    "juicy! ( ͡° ͜ʖ ͡°)",
    "kissable!",
    "lovable!",
    "majestic!",
    "marvelous!",
    "nymphetamic!",
    "out of this world!",

    "precious!",
    "pretty!",

    "queenly!",
    
    "remarkable!",
    
    "serene!",
    "sexy! :3",
    "soulful!",
    "special",
    "spectacular!",
    "splendid!",
    "stunning",
    
    "tranquil!",
    "unugly! D:<",
    "vibrant!",
    "wow!",
    "X/X!",
    "yummy! ;)",

    "zestful!"
  ];

  var col = [
    "#E57373",
    "#F06292",
    "#BA68C8",
    "#9575CD",
    "#7986CB",
    "#64B5F6",
    "#4FC3F7",
    "#4DD0E1",
    "#4DB6AC",
    "#81C784",
    "#AED581",
    "#FFD54F",
    "#FFB74D",
    "#FF8A65"

  ];
  
  var hei = $('.adj').height();

  $('.uno').css('margin-top', hei).delay(500).fadeIn(500).delay(2000).fadeOut(500);
  $('.dos').css('margin-top', hei).delay(3500).fadeIn(500).delay(1000).animate({'margin-top': 0}, 500);
  $('.adj').delay(5000).animate({'opacity': 1}, 500);

  var num = 0;
  var cno = 0;
  var run = 1;

  var interval = setInterval(function() {
    if (run == 1) {
      $('.adj').html("<span style='color: " + col[cno] + "'>" + adj[num] + "</span>");

      num++;
      cno++;

      if (num >= adj.length) {
        num = 0;
      }

      if (cno >=...