JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<div class="chart-area">
  <div class="column important"> <span class="value">100</span>
  </div>
  <div class="column important"> <span class="value">65</span>
  </div>
  <div class="column"> <span class="value">20</span>
  </div>
  <div class="column"> <span class="value">18</span>
  </div>
  <div class="column"> <span class="value">5</span>
  </div>
</div>
<div class="chart-desc">
  <div class="col-desc">val 1</div>
  <div class="col-desc">val 2</div>
  <div class="col-desc">val 3</div>
  <div class="col-desc">val 4</div>
  <div class="col-desc">val 5</div>
</div>

CSS

body {
  padding: 5em;
  font-family: arial;
}
.chart-area {
  width: 18em;
  height: 25em;
  background: white;
  overflow: hidden;
  padding: .1em;
  border-bottom: 1px solid #e9e9e9;
}
.chart-desc {
  width: 18em;
  padding: .1em;
  clear: both;
}
.col-desc {
  width: 3em;
  float: left;
  
  font-size: 1em;
  margin-right: .5em;
  text-align: center;
  line-height: 2em;
  color: #868686;
}
.chart-area .column {
  opacity: 0;
  width: 3em;
  background: #bebebe;
  height: 90%;
  height: 25em;
  float: left;
  -webkit-transition: -webkit-transform 400ms ease-in-out, opacity 400ms linear;
  -moz-transition: -moz-transform 400ms ease-in-out, opacity 400ms linear;
  -ms-transition: -ms-transform 400ms ease-in-out, opacity 400ms linear;
  -o-transition: -o-transform 400ms ease-in-out, opacity 400ms linear;
  transition: transform 400ms ease-in-out, opacity 400ms linear;
  margin-right: .5em;
}
.chart-area.open .column {
  opacity: 1;
}
.chart-area .column.important {
  background: #776b5f;
}
.chart-area .column {
  -webkit-transform: translate3d(0, 27em, 0);
}
.chart-area .value {
  display: block;
  font-size: 1.3em;
  position: relative;
  top: -1em;
  color: #868686;
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity 400ms linear;
  -moz-transition: opacity 400ms linear;
  -ms-transition: opacity 400ms linear;
  -o-transition: opacity 400ms linear;
  transition: opacity 400ms linear;
}
.chart-area.open .value {
  opacity: 1;
}

JavaScript

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function showChart(){
  $('.chart-area').each(function(){
  if (isScrolledIntoView($(this))) {
    if (!$(this).hasClass('open')) {
      $(this).addClass('open');

      var fullHeight = $('.chart-area').height();

      $('.chart-area .column').each(function () {
        var $columnValue = $(this).find('.value').first();
        var val = parseInt($columnValue.text());
        var move = fullHeight - (((fullHeight - 20) / 100) * val);
        $(this).css('-webkit-transform', 'translate3d(0,' + move + 'px,0)');
      });
    }
  }
  });
}

$(document).ready(function () {
  showChart();
  });

$(window).scroll(function(){
  showChart();
});