Final AnkhBot Poll Overlay

In this example below you will see how to do a Final AnkhBot Poll Overlay with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by wellbrained, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright wellbrained ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Streamlabs Chatbot - Bet Overlay v2.0</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--
To cycle through the different versions just change the second ID of the Div "Block": 
VERSIONS:
- block
- block-topdown
- sidebar
- inline-top
- inline-bottom
-->
<div id="container">
  <div id="block">
    <div id="header"> 
      <h1>This new poll overlay from Streamlabs Chatbot looks ... ?</h1>
      <div id="stats">
        <div id="costs"><span>Costs: </span>10<span> Brainbugs</span></div>
        
        <div id="multivote"><span>Multivote: </span>Yes <span>(Max 3 Votes)</span></div>
        <div id="votes"><span>Total Votes: </span>999</div>
        <div id="timer"><span>Time Left: </span>01:50:37</div>
      </div>
    </div>
  
    <div id="content">
      <div id="optionContainer">
        <ul> 
          <li id="0" class="option">
            <div class="optionName">Amazing <span>(!vote 0)</span>
              <div class="percentage">50%</div>
            </div>
            <div class="optionBar">
              <span class="bgBar">&nbsp;</span>
              <span class="progressBar" style="width:50%;">&nbsp;</span>
            </div>
          </li>
          <li id="1" class="option">
            <div class="optionName">Okay <span>(!vote 0)</span>
              <div class="percentage">0%</div>
            </div>
            <div class="optionBar">
              <span class="bgBar">&nbsp;</span>
              <span class="progressBar" style="width:0%;">&nbsp;</span>
            </div>
          </li>
          <li id="2" class="option">
            <div class="optionName">Bad <span>(!vote 0)</span>
              <div class="percentage">25%</div>
            </div>
            <div class="optionBar">
              <span class="bgBar">&nbsp;</span>
              <span class="progressBar" style="width:25%;">&nbsp;</span>
          </li>
          <li id="3" class="option">
            <div class="optionName">Never show it again <span>(!vote 0)</span>
              <div class="percentage">25%</div>
            </div>
            <div class="optionBar">
              <span class="bgBar">&nbsp;</span>
              <span class="progressBar" style="width:25%;">&nbsp;</span>
          </li>
        </ul>
      </div>

      <div id="entryContainer">
        <div id="entryHeader">Partici-PANTS:</div>
        <ul>
          <li class="entry">wellbrained <span>2</span></li>
        </ul>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/wellbrained/final-ankhbot-poll-overlay-NgBWQo */
* {
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
}

ul, li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#container {
  position: relative;
  left: -750;
  width: 40%;
  height: auto;
  font-family: "Segoe UI", sans-serif;
  font-size: 12pt;
  color: #fff;
}
#container #header {
  background-color: #1e1e1e;
  border-radius: 3px;
  position: relative;
  left: 0;
  padding: 10px;
  margin: 0;
}
#container h1 {
  color: #fff;
  margin: 0;
}
#container #costs, #container #votes, #container #timer, #container #multivote {
  font-weight: bold;
  color: #E67E22;
  display: inline;
  padding-right: 15px;
  text-transform: uppercase;
}
#container #stats span {
  font-weight: normal;
  color: #fff;
  font-size: 10pt;
}
#container #content {
  width: 100%;
  position: relative;
  top: 10px;
}
#container #optionContainer, #container #entryContainer {
  display: inline-block;
  border-radius: 3px;
  position: relative;
  float: left;
}
#container #optionContainer {
  width: 66%;
  margin-right: 1%;
  background-color: none;
}
#container #optionContainer li {
  background-color: #1e1e1e;
  padding: 10px;
  margin-bottom: 3px;
  border-radius: 3px;
  position: relative;
  left: -750px;
  opacity: 0;
  font-size: 12pt;
}
#container .percentage {
  float: right;
  margin-right: 5px;
}
#container .optionBar {
  text-align: center;
  margin: 5px 5px -20px 0;
}
#container .progressBar, #container .bgBar {
  display: block;
}
#container .progressBar {
  position: relative;
  top: -22px;
  background-color: #e67e22;
  border-radius: 3px;
}
#container .bgBar {
  background-color: #555;
  border: 1px solid #1e1e1e;
  border-radius: 3px;
  width: 100%;
  text-align: center;
}
#container #entryContainer {
  background-color: #1e1e1e;
  padding: 10px;
  width: 33%;
  opacity: 0;
}
#container #entryHeader {
  text-align: center;
  margin-bottom: 10px;
}
#container #entryContainer li {
  width: 100%;
  padding: 3px 10px;
  font-size: 12pt;
  color: #fff;
  border-radius: 3px;
  background-color: #e67e22;
}
#container #entryContainer li span {
  float: right;
  padding-right: 10px;
}
#container #block #header {
  width: 100%;
}
#container #block h1 {
  font-size: 16pt;
}
#container #block #costs, #container #block #votes, #container #block #timer, #container #block #multivote {
  font-size: 12pt;
}
#container #block-topdown #header {
  width: 100%;
}
#container #block-topdown h1 {
  font-size: 16pt;
}
#container #block-topdown #costs, #container #block-topdown #votes, #container #block-topdown #timer, #container #block-topdown #multivote {
  font-size: 12pt;
}
#container #block-topdown #optionContainer li {
  opacity: 0;
  position: absolute;
  top: -80px;
  left: 0;
  width: 100%;
  z-index: -1;
}
#container #block-topdown #entryContainer {
  float: right;
}
#container #sidebar #optionContainer, #container #sidebar #entryContainer {
  width: 100%;
}
#container #sidebar #optionContainer li {
  left: -775px;
}
#container #sidebar #entryContainer {
  margin-top: 10px;
}
#container #inline-bottom {
  width: 100%;
}
#container #inline-bottom #header {
  max-width: 39.5%;
}
#container #inline-bottom #content {
  height: 115px;
}
#container #inline-bottom #optionContainer {
  width: 100%;
  height: 100%;
}
#container #inline-bottom #optionContainer ul {
  height: 100%;
}
#container #inline-bottom #optionContainer li {
  padding: 10px 0px;
  margin: 0 5px 3px 0;
  left: 0;
  float: left;
  width: 19.6%;
  height: 60px;
  font-size: 10pt;
  text-align: center;
}
#container #inline-bottom .percentage {
  text-align: center;
  width: 100%;
  margin: 3px 0 0 0;
  font-weight: bold;
  color: #E67E22;
  font-size: 12pt;
}
#container #inline-bottom .optionBar {
  display: none;
}
#container #inline-bottom #entryContainer {
  display: none;
}
#container #inline-bottom ul, #container #inline-bottom ul li {
  -webkit-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  transform: scaleY(-1);
}
#container #inline-top {
  width: 100%;
}
#container #inline-top #header {
  max-width: 39.5%;
}
#container #inline-top #content {
  height: 115px;
  top: -90px;
}
#container #inline-top #optionContainer {
  width: 100%;
  height: 100%;
}
#container #inline-top #optionContainer ul {
  height: 100%;
}
#container #inline-top #optionContainer li {
  padding: 10px 0px;
  margin: 0 5px 3px 0;
  left: 0;
  float: left;
  width: 19.6%;
  height: 60px;
  font-size: 10pt;
  text-align: center;
}
#container #inline-top .percentage {
  text-align: center;
  width: 100%;
  margin: 3px 0 0 0;
  font-weight: bold;
  color: #E67E22;
  font-size: 12pt;
}
#container #inline-top .optionBar {
  display: none;
}
#container #inline-top #entryContainer {
  display: none;
}


/*Downloaded from https://www.codeseek.co/wellbrained/final-ankhbot-poll-overlay-NgBWQo */
var tl = new TimelineLite();
 
if ($('#container div:first-child').attr('id') == "block") {
  $('#block').css('display', 'block');
  
  tl.fromTo("#header", 2, {left: -1000}, {left: 0});
  
  $("#optionContainer li").each(function(index, element) {
    tl.to(element, 1.3, { left: 0 , opacity: 1 }, "-=.6");
  }); 
}
   
if ($('#container div:first-child').attr('id') == "block-topdown") {
  $('#block-topdown').css('display', 'block');
  
  tl.fromTo("#header", 2, {left: -750}, {left: 0});
  
  $("#optionContainer li").each(function(index, element) {
    tl.to(element, 1.3, { top: 0 + (index * 75), opacity: 1 }, "-=.6");
  });
}  

if ($('#container div:first-child').attr('id') == 'sidebar') {
  $('#sidebar').css('display', 'block');
  
  tl.fromTo("#header", 2, {left: -750}, {left: 0});
  
  $("#optionContainer li").each(function(index, element) {
    tl.to(element, 1.3, { left: 0, opacity: 1 }, "-=.6");
  }); 
} 

if ($('#container div:first-child').attr('id') == 'inline-bottom') {
  $('#container').attr('style', 'width: 100%');
  
  if ( $('#optionContainer ul li').length > 5 ) {
    $('#header').attr('style','bottom: 0px');
  } else {
    $('#header').attr('style','bottom:-62px');
  }   
   
  tl.fromTo("#header", 2, {left: -750}, {left: 0});
  tl.fromTo("#optionContainer ul li", 2, {opacity: 0}, {opacity: 1});
  
  // Looping through each <li> element and do the animation for it
  var items = document.querySelectorAll('#optionContainer li'), length = items.length;
  var duration = 1.3;
  v
  var tl2 = new TimelineMax({ paused:true, repeat: -1});
  for (var i = 0; i < length; i += 1) {
      tl.fromTo(items[i], duration, { bottom: 0 }, { bottom: 200 }, "-=1");
  }
  tl2.play();
} 

if ($('#container div:first-child').attr('id') == 'inline-top') {
  $('#container').attr('style', 'width: 100%');
  
  if ( $('#optionContainer ul li').length > 5 ) {
    $('#header').attr('style','top: 120px');
  } else {
    $('#header').attr('style','top: 56px');
  }   
   
  tl.fromTo("#header", 2, {left: -750}, {left: 0});
  tl.fromTo("#optionContainer ul li", 2, {opacity: 0}, {opacity: 1});
  
  // Looping through each <li> element and do the animation for it
  var items = document.querySelectorAll('#optionContainer li'), length = items.length;
  var duration = 1.3;
  var tl2 = new TimelineMax({ paused:true, repeat: -1});
  for (var i = 0; i < length; i += 1) {
      tl.fromTo(items[i], duration, { top: -150 }, { top: 0 }, "-=1");
  }
  tl2.play();
} 

// When Options are displayed show the Entry Container
tl.fromTo("#entryContainer", 2, {opacity: 0}, {opacity: 1});

Comments