ww-poll-demo

index.html

<div class="content">
 <div class="img-wrapper">
  <span>
   <img src="http://placehold.it/400x300&text=reset" alt="" />
  </span>
 </div><!-- end img-wrapper -->
 <div class="poll-wrapper">
  <div class="poll-two-result-bar-wrap">
   <div class="two-line-result">
    <div class="results-text"></div>
    <div class="results-bar-wrap">
     <div class="results-bar left-bar">
      <span class="perc"></span>
      <span class="poll-answer-text"></span>
      <span class="percentage">27%</span>
     </div>
     <div class="results-bar right-bar">
      <span class="perc"></span>
      <span class="poll-answer-text"></span>
      <span class="percentage">63%</span>
     </div>
    </div>
   </div><!-- end two-line-result -->
  </div>
  <div class="text-wrapper">
   <div class="title">
    Take the poll
   </div>
   <div class="message-wrapper">
    <div class="message">
     <div class="answer left-answer">
      <div class="poll-answer-icon"></div>
      <div class="poll-answer-text">Addison</div>
     </div>
     <span class="message-text">
      Who should win the $100.00 prize and trophy for MasterChef jr?
     </span>
     <div class="answer right-answer">
      <div class="poll-answer-icon"></div>
      <div class="poll-answer-text">Avery</div>
     </div>
    </div><!-- end message -->
   </div><!-- end message-wrapper -->
  </div><!-- end text-wrapper --> 
 </div>
</div>

script.js

$( ".title" ).click(function() {
  $(this).hide()
  $( ".left-answer, .right-answer" ).toggleClass("visible");
  // $( ".content, .message, .message-text" ).toggleClass("wide");
  $( ".message, .message-text" ).toggleClass("wide");
  $(".content, .message").animate({ "max-width": "40em" }, 250); 
});

//when you click the user
$( ".answer" ).one("click", function() {
 
 $(this).children(".poll-answer-icon").addClass("selected");
 
 var leftAnswerText = $(".left-answer .poll-answer-text").text();
 var rightAnswerText = $(".right-answer .poll-answer-text").text();
 
 console.log("clicked");
 
 $(".left-bar .poll-answer-text").text(leftAnswerText);
 $(".right-bar .poll-answer-text").text(rightAnswerText);
 
 $(".message .poll-answer-text").css("visibility", "hidden");
 $(".results-bar-wrap").hide().css("visibility", "visible").fadeIn();
  // $(".results-bar-wrap").css("visibility", "visible");
});

// reset everything
$(".img-wrapper").click(function(){
 $(".title").show();
 $( ".left-answer, .right-answer" ).toggleClass("visible");
 $( ".message, .message-text" ).toggleClass("wide");
 $(".content").animate({ "max-width": "25em" }, 500);
 $(".results-bar-wrap").css("visibility", "hidden");
 $(".message .poll-answer-text").css("visibility", "visible");
 $(".poll-answer-icon").removeClass("selected");
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

$accent-color: #1a84dd;
%button-effect{
 background-color: $accent-color;
  display: inline-block;
  padding: 0.3em 0.5em;
  // max-width: 7.5em;
  color:white;
  text-align: center;
  text-transform: uppercase;
 &:hover{
  cursor: pointer;
 }
}

body{
 font-family: sans-serif;
 font-size: 1em;
 line-height: 1.3em;
}
.content{
 max-width: 25em;
 display: flex;
 margin: 60px auto;
 &.wide{
  max-width: 40em;
  animation-name: expand;
 }
}

@keyframes expand {
 0%   {max-width: 25em;}
 100% {max-width: 40em;}
}

// image wrapper
.img-wrapper{
 display: flex;
 align-items: flex-end;
 span{
  height:5em;
  display: flex;
  align-items: center;
  background-color: rgba(0,0,0,0.5);
 }
 img{ 
  width: 5em;
  height: auto;
  padding: 0.5em;
  border-right: solid thin #eee;
 }
}

//poll-wrapper
.poll-wrapper{
 display: inline-block;
}
// Results bar
.poll-two-result-bar-wrap{}
.two-line-result{
 display: block;
 box-sizing: border-box;
 max-width: 16em;
 margin: 0 auto;
}
.results-text{}
.results-bar-wrap{
  width: 100%;
  overflow: hidden;
  visibility: hidden;
 .results-bar{
  line-height: 1.7em;
 }
 .results-bar{
  height: 1.7em;
  display: inline-block;
  float: left;
  background-color: rgba(0,0,0,0.5);
  box-sizing: border-box;
  border: solid thin #eee;
  color: white;
  position: relative;
  // span{
  //  margin: 0 0.2em;
  // }
  .perc{
   // height: 1.em;
   position: absolute;
   top:0;
   bottom:0;
  }
  .poll-answer-text, .percentage{
   z-index: 100;
   position: relative;
  }
  .poll-answer-text{
    // background-color: yellow;
    margin: 0 0.7em;
  }
  .percentage{
    // background-color: green;
    margin: 0 0.3em;
  }
 }
 .left-bar{
  width: 50%;
  text-align: left;
  .perc{
   width: 27%;
   background-color: red;
   right:0;
  }
  .poll-answer-text{
   float: left;
  }
  .percentage{
   float: right;
  }
 }
 .right-bar{
  width: 50%;
  text-align: right;
  .perc{
   width: 63%;
   background-color: $accent-color;
   left:0;
  }
  .poll-answer-text{
   float: right;
  }
  .percentage{
   float: left;
  }
 }
}

// Text wrapper
.text-wrapper{
 background-color: rgba(0,0,0,0.5);
 color: white;
 position: relative;
 padding-top: 0.5em;
 padding-bottom: 0.5em;
 display: flex;
 height: 4em;
}
.title{
 @extend %button-effect;
 position: absolute;
 top:-1.3em;
 right: 2em;
}
.message-wrapper{
 display: flex;
 align-items: center;
}
.message{
 text-align: center;
 display: flex;
 align-items: center;
 position: relative;
 // background-color: pink;
 // transition: all 0.2s ease-in-out;
 &.wide{
  max-width: 40em;
  animation-name: expand;
 }
}

@keyframes expand {
 0%   {max-width: 25em;}
 100% {max-width: 40em;}
}

.message-text{
 line-height: 1.5em;
 width: 16em;
 &.wide{
  margin-left: 7em;
  margin-right: 7em;
 }
}

// Poll answers
.answer{
 text-align: center;
 transform: scale(0);
 position: absolute;
 transition: all 0.2s ease-in-out;
 &.visible{
  animation-name: bounceIn;
  animation-duration: 450ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  bottom: -0.38em;
 }
}

@keyframes bounceIn{
  0%{
    opacity: 0;
    transform: scale(0.3) translate3d(0,0,0);
  }
  50%{
    opacity: 0.9;
    transform: scale(1.1);
  }
  80%{
    opacity: 1;
    transform: scale(0.89);
  }
  100%{
    opacity: 1;
    transform: scale(1) translate3d(0,0,0);
  }
}

.poll-answer-icon{
 background-size: cover;
 height: 7em;
 width: 7em;
 margin: 0 auto -0.3em;
 border-radius: 100%;
 box-sizing: border-box;
 &.selected{
  border: solid 0.2em $accent-color;
 }
}
.answer{
 .poll-answer-text{
  @extend %button-effect;
  min-width:5em;
 } 
}
.left-answer{
 left: 0.5em;
.poll-answer-icon{
 background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/42973/model-008.png');
}
}
.right-answer{
 right: 0.5em;
.poll-answer-icon{
 background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/42973/model-024.png');
}
}

zvywMg.markdown

zvywMg

A Pen by Jabal Torres on CodePen.

License.