动画技能栏

时间：2017-03-22 14:54:21

标签： javascript jquery html css jquery-animate

所以，我有这个“技能条形图”，我需要动画。不只是尽快，但当观众向下滚动时，他们会看到动画发生！

这就是我所拥有的：

    .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>

注意：我只是JavaScript和jQuery的初学者。

1 个答案:

答案 0 :(得分：3)

您可以使用纯{CSS}使用keyframes以及jQuery来检测元素是否在视口中。请注意，我故意在条形图上方添加了额外的高度来强制滚动条：

荣誉：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>

相关问题
最新问题