Chat style

by Kirubel Girma

HTML

<div class="conts" id="oclk">
</div>

<button id="testclick">CLICK TO TRY</button>

CSS

body {
  background: white;
}

.wrppr {
  min-height: 3em;
  margin: 1em;
}

.conts {
  width: 22em;
}

.talk_bubble {
  margin: 1.2em;
  padding: .7em;
  font-family: arial;
  color: white;
  animation: chat_in .145s ease-in;
}

.bbl_left {
  border-radius: 1em 1em 1em 0em;
  background: grey;
  float: left;
}

.bbl_right {
  border-radius: 1em 1em 0em 1em;
  background: red;
  float: right;
}

.loading_bbl {
  display: inline-block;
}

.bounce1,
.bounce2,
.bounce3 {
  height: 0.5em;
  width: 0.5em;
  margin: 0.2em;
  border-radius: 3em;
  background: white;
  float: left;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0)
  }
  40% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

@keyframes chat_in {
  from {
    opacity: 0;
    transform: scale(.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

JavaScript

document.getElementById('testclick').addEventListener('click', storyboard);

function appendchat(txt, pos) {

  var talk_bubble = document.createElement('div');
  talk_bubble.classList.add('talk_bubble', pos);

  var tl_text = document.createElement('span');
  tl_text.innerHTML = txt;
  tl_text.classList.add('tl_text');

  talk_bubble.appendChild(tl_text);

  document.getElementById('oclk').appendChild(talk_bubble);
  document.body.scrollTop = document.body.scrollHeight;
}

function storyboard() {
  setTimeout("appendchat('Hey, I’m “DCTOP20 Members”!','bbl_left')", 2000);
  setTimeout("appendchat('The easiest way for you to get connected and take your music career to the next level, online.','bbl_left')", 3000);
  setTimeout("appendchat('Sounds crazy good. Tell me more!','bbl_right')", 5000);
  setTimeout("appendchat('You can easily connect with the elite in the music industry in DC, grow your fan base, learn the secrets of the industry, and build with other local celebrities like you!','bbl_left')", 7000);
  setTimeout("appendchat('Plus, you can earn and cash out money for creating dope content.','bbl_left')", 8000);
  setTimeout("appendchat('Nice, so what’s next?', 'bbl_right')", 10000);
  setTimeout("appendchat('Up to you, take your pick! ;)', 'bbl_left')", 11500);
};