Animate skill bars

Question

So, i've got this "skills bar graph" that i need animated. Not just ASAP, but when the viewer scrolls down to it, so they'll see the animate happen!

This is what i've got:

    .bargraph {
      height: 229px;
      position: relative;
      border-left: 1px solid #d4d4d4;
      margin: 0 auto;
    }
    
    .bargraph ul.bars {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    
    .bargraph ul.bars li {
      position: absolute;
      width: 30px;
      height: 200px;
      bottom: 29px;
      padding: 0;
      margin: 0;
      background: url(http://pics.cssbakery.com/pics/bars200.jpg) no-repeat;
      text-align: center;
      font-weight: bold;
      color: white;
      line-height: 2.5em;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      font-size: 13px;
      z-index: 99;
    }
    
    .bargraph ul.bars li span {
      position: relative;
      top: -25px;
      color: #7c7c7c;
    }
    
    .bargraph ul.bars li.bar1 {
      left: 21px;
    }
    
    .bargraph ul.bars li.bar2 {
      left: 94px;
    }
    
    .bargraph ul.bars li.bar3 {
      left: 167px;
    }
    
    .bargraph ul.bars li.bar4 {
      left: 240px;
    }
    
    .bargraph ul.bars li.bar5 {
      left: 313px;
    }
    
    .bargraph ul.bars li.bar6 {
      left: 386px;
    }
    
    .bargraph ul.bars li.bar7 {
      left: 459px;
    }
    
    .bargraph ul.bars li.bar8 {
      left: 532px;
    }
    
    .bargraph ul.bars li.bar9 {
      left: 605px;
    }
    
    .bargraph ul.bars li.bluebar {
      background-position: 0px bottom;
    }
    
    .bargraph ul.bars li.redbar {
      background-position: -30px bottom;
    }
    
    .bargraph ul.bars li.greenbar {
      background-position: -60px bottom;
    }
    
    .bargraph ul.bars li.orangebar {
      background-position: -90px bottom;
    }
    
    .bargraph ul.bars li.grapebar {
      background-position: -120px bottom;
    }
    
    .bargraph ul.bars li.purplebar {
      background-position: -150px bottom;
    }
    
    .bargraph ul.bars li.crimsonbar {
      background-position: -180px bottom;
    }
    
    .bargraph ul.bars li.navybar {
      background-position: -210px bottom;
    }
    
    .bargraph ul.bars li.goldbar {
      background-position: -240px bottom;
    }
    
    .bargraph ul.bars li.tealbar {
      background-position: -270px bottom;
    }
    
    .label {
      list-style-type: none;
      position: absolute;
      bottom: 0px;
      margin: 0;
      padding: 0;
    }
    
    .label li {
      color: black;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 11px;
      width: 73px;
      float: left;
      text-align: center;
      overflow: hidden;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      line-height: 1em;
    }
    
    ul.y-axis {
      list-style-type: none;
      position: absolute;
      left: -45px;
      width: 40px;
      text-align: right;
      bottom: 0;
      margin: 0;
      padding: 0;
    }
    
    ul.y-axis li:first-child {
      height: 40px;
      line-height: 40px;
    }
    
    ul.y-axis li {
      color: #aba8a8;
      font-size: 12px;
      height: 51px;
      line-height: 51px;
      text-align: right;
    }
    
    .bargraph p {
      position: absolute;
      left: 0;
      top: 236px;
      padding: 0;
      margin: 0;
      text-align: left;
      width: 100%;
      font-family: Verdana, sans-serif;
      font-size: 10px;
      color: black;
      line-height: 1.3em;
    }

<div class="bargraph" style="width: 550px;">
  <ul class="bars">
    <li class="bar1 purplebar" style="height: 200px;">100</li>
    <li class="bar2 redbar" style="height: 200px;">100</li>
    <li class="bar3 bluebar" style="height: 70px;">35</li>
    <li class="bar4 greenbar" style="height: 70px;">35</li>
    <li class="bar5 orangebar" style="height: 160px;">80</li>
    <li class="bar6 navybar" style="height: 160px;">80</li>
    <li class="bar7 crimsonbar" style="height: 200px;">100</li>
  </ul>
  <ul class="label">
    <li>Banana</li>
    <li>Apple</li>
    <li>Dog</li>
    <li>Human</li>
    <li>Pie</li>
    <li>Coffee</li>
    <li>Help</li>
  </ul>
  <ul class="y-axis">
    <li>100</li>
    <li>75</li>
    <li>50</li>
    <li>25</li>
  </ul>
</div>

Note: i'm only a beginner at JavaScript and jQuery.

score 3 · Accepted Answer · edited May 23 '17 at 10:29

You can achieve this with pure CSS3 using keyframes as well jQuery to detect whether the element is in the viewport. Note that I've deliberately added extra height above the bar chart to force a scrollbar:

Kudos: Activate CSS3 animation when the content scrolls into view

function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.bars');

    // If the animation has already been started
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
   
  console.log('isInView')
        // Start the animation
        $elem.addClass('start');
    }
}

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});

.start > .slideUp {
  animation-name: slideUp;
  -webkit-animation-name: slideUp;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}

@keyframes slideUp {
  100% {
    opacity: 1;
    display: block;
  }
  0% {
    height: 0;
    opacity: 0;
    display: block;
  }
}

.bargraph {
  height: 229px;
  position: relative;
  border-left: 1px solid #d4d4d4;
  margin: 0 auto;
}

.bargraph ul.bars {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.bargraph ul.bars li {
  position: absolute;
  width: 30px;
  height: 200px;
  bottom: 29px;
  padding: 0;
  margin: 0;
  background: url(http://pics.cssbakery.com/pics/bars200.jpg) no-repeat;
  text-align: center;
  font-weight: bold;
  color: white;
  line-height: 2.5em;
  font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  z-index: 99;
}

.bargraph ul.bars li span {
  position: relative;
  top: -25px;
  color: #7c7c7c;
}

.bargraph ul.bars li.bar1 {
  left: 21px;
}

.bargraph ul.bars li.bar2 {
  left: 94px;
}

.bargraph ul.bars li.bar3 {
  left: 167px;
}

.bargraph ul.bars li.bar4 {
  left: 240px;
}

.bargraph ul.bars li.bar5 {
  left: 313px;
}

.bargraph ul.bars li.bar6 {
  left: 386px;
}

.bargraph ul.bars li.bar7 {
  left: 459px;
}

.bargraph ul.bars li.bar8 {
  left: 532px;
}

.bargraph ul.bars li.bar9 {
  left: 605px;
}

.bargraph ul.bars li.bluebar {
  background-position: 0px bottom;
}

.bargraph ul.bars li.redbar {
  background-position: -30px bottom;
}

.bargraph ul.bars li.greenbar {
  background-position: -60px bottom;
}

.bargraph ul.bars li.orangebar {
  background-position: -90px bottom;
}

.bargraph ul.bars li.grapebar {
  background-position: -120px bottom;
}

.bargraph ul.bars li.purplebar {
  background-position: -150px bottom;
}

.bargraph ul.bars li.crimsonbar {
  background-position: -180px bottom;
}

.bargraph ul.bars li.navybar {
  background-position: -210px bottom;
}

.bargraph ul.bars li.goldbar {
  background-position: -240px bottom;
}

.bargraph ul.bars li.tealbar {
  background-position: -270px bottom;
}

.label {
  list-style-type: none;
  position: absolute;
  bottom: 0px;
  margin: 0;
  padding: 0;
}

.label li {
  color: black;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  width: 73px;
  float: left;
  text-align: center;
  overflow: hidden;
  font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  line-height: 1em;
}

ul.y-axis {
  list-style-type: none;
  position: absolute;
  left: -45px;
  width: 40px;
  text-align: right;
  bottom: 0;
  margin: 0;
  padding: 0;
}

ul.y-axis li:first-child {
  height: 40px;
  line-height: 40px;
}

ul.y-axis li {
  color: #aba8a8;
  font-size: 12px;
  height: 51px;
  line-height: 51px;
  text-align: right;
}

.bargraph p {
  position: absolute;
  left: 0;
  top: 236px;
  padding: 0;
  margin: 0;
  text-align: left;
  width: 100%;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  color: black;
  line-height: 1.3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 500px">Scroll down...</div>
<div class="bargraph" style="width: 1000px">
  <ul class="bars">
    <li class="bar1 purplebar slideUp" style="height: 200px;">100</li>
    <li class="bar2 redbar slideUp" style="height: 200px;">100</li>
    <li class="bar3 bluebar slideUp" style="height: 70px;">35</li>
    <li class="bar4 greenbar slideUp" style="height: 70px;">35</li>
    <li class="bar5 orangebar slideUp" style="height: 160px;">80</li>
    <li class="bar6 navybar slideUp" style="height: 160px;">80</li>
    <li class="bar7 crimsonbar slideUp" style="height: 200px;">100</li>
  </ul>
  <ul class="label">
    <li>Banana</li>
    <li>Apple</li>
    <li>Dog</li>
    <li>Human</li>
    <li>Pie</li>
    <li>Coffee</li>
    <li>Help</li>
  </ul>
  <ul class="y-axis">
    <li>100</li>
    <li>75</li>
    <li>50</li>
    <li>25</li>
  </ul>
</div>

No problem - if you could select this as the correct answer given it helped you! — G0dsquad, Mar 22 '17 at 16:10
Ofcourse - i forgot that. I honestly thought the upvote was the same thing =) — Carsten Andersen, Mar 22 '17 at 16:33

Animate skill bars

1 Answers1

Linked