li

li

关注
发信
关注(28)粉丝(399)

动画技能栏

本文介绍了动画技能栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



这就是我得到的：



.bargraph {height：229px;位置：相对; border-left：1px solid＃d4d4d4;保证金：0汽车; } .bargraph ul.bars {margin：0;填充：0; list-style-type：none; } .bargraph ul.bars li {position：absolute;宽度：30px; height：200px;底部：29px;填充：0;保证金：0;背景：url（http://pics.cssbakery.com/pics/bars200.jpg）no-repeat; text-align：center; font-weight：bold;白颜色;线高：2.5em; font-family：Trebuchet MS，Verdana，Arial，Helvetica，sans-serif; font-size：13px; z-index：99; } .bargraph ul.bars li span {position：relative;顶部：-25px;颜色：＃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;位置：绝对; bottom：0px;保证金：0;填充：0; } .label li {color：black;文字转换：大写; letter-spacing：0.1em; font-size：11px;宽度：73px;向左飘浮; text-align：center;溢出：隐藏; font-family：Trebuchet MS，Verdana，Arial，Helvetica，sans-serif; line-height：1em; } ul.y-axis {list-style-type：none;位置：绝对;左：-45px;宽度：40px; text-align：right;底部：0;保证金：0;填充：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;左：0;顶部：236px;填充：0;保证金：0; text-align：left;宽度：100％; font-family：Verdana，sans-serif; font-size：10px;颜色：黑色;行高：1.3em; } 
 < div class =bargraphstyle = width：550px;> < ul class =bars> < li class =bar1 purplebarstyle =height：200px;> 100< / li> < li class =bar2 redbarstyle =height：200px;> 100< / li> < li class =bar3 bluebarstyle =height：70px;> 35< / li> < li class =bar4 greenbarstyle =height：70px;> 35< / li> < li class =bar5 orangebarstyle =height：160px;> 80< / li> < li class =bar6 navybarstyle =height：160px;> 80< / li> < li class =bar7 crimsonbarstyle =height：200px;> 100< / li> < / UL> < ul class =label> <李> Banana和LT; /锂> <李>苹果< /锂> <李>狗和LT; /锂> <李>人< /锂> <李>馅饼< /锂> <李>咖啡和LT; /锂> <李>说明与LT; /锂> < / UL> < ul class =y-axis> <李> 100℃; /锂> <李> 75℃; /锂> <李→50< /锂> <李> 25℃/锂> < / div>


$ b 注意：在JavaScript和jQuery中只是一个初学者。使用 keyframes可以使用纯CSS3来实现这一点。 以及jQuery来检测元素是否在视口中。请注意，我故意在条形图上添加了额外的高度来强制滚动条：



荣誉： 

 function isElementInViewport（elem）{var $ elem = $（elem）; //获取页面的滚动位置。 var scrollElem =（（navigator.userAgent.toLowerCase（）。indexOf（'webkit'）！= -1）？'body'：'html'）; var viewportTop = $（scrollElem）.scrollTop（）; var viewportBottom = viewportTop + $（window）.height（）; //获取页面上元素的位置。 var elemTop = Math.round（$ elem.offset（）。top）; var elemBottom = elemTop + $ elem.height（）; return（（elemTop< viewportBottom）&&&（elemBottom> viewportTop））;} //检查是否该启动animation.function checkAnimation（）{var $ elem = $（'。bars'）; //如果动画已经开始if（$ elem.hasClass（'start'））return; if（isElementInViewport（$ elem））{console.log（'isInView'）//开始动画$ elem.addClass（'start'）; }} //捕获滚动事件$（window）.scroll（function（）{checkAnimation（）;}）;  
  .start> .slideUp {animation-name：slideUp; -webkit-animation-name：slideUp;动画持续时间：2s; -webkit-animation-duration：2s;动画定时功能：轻松; -webkit-animation-timing-function：ease; visibility：visible！important;} @ keyframes slideUp {100％{opacity：1;显示：块; } 0％{height：0;不透明度：0;显示：块; }}。bargraph {height：229px;位置：相对; border-left：1px solid＃d4d4d4; margin：0 auto;}。bargraph ul.bars {margin：0;填充：0; list-style-type：none;}。条形图ul.bars li {position：absolute;宽度：30px; height：200px;底部：29px;填充：0;保证金：0;背景：url（http://pics.cssbakery.com/pics/bars200.jpg）no-repeat; text-align：center; font-weight：bold;白颜色;线高：2.5em; font-family：Trebuchet MS，Verdana，Arial，Helvetica，sans-serif; font-size：13px; z-index：99;}。条形图ul.bars li span {position：relative;顶部：-25px;颜色：＃7c7c7c;}。条形图ul.bars li.bar1 {left：21px;}。条形图ul.bars li.bar2 {left：94px;}。条形图ul.bars li.bar3 {left：167px;}。 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;}。条形图ul.bars li.redbar {background-position：-30px bottom;}。条形图ul.bars li.greenbar {background-position：-60px bottom;}。条形图ul.bars li.orangebar {background-position：-90px }; bargraph ul.bars li.grapebar {background-position：-120px bottom;}。bargraph ul.bars li.purplebar {background-position：-150px bottom;}。bargraph ul.bars li.crimsonbar {background-位置：-180px bottom;}。bargraph ul.bars li.navybar {background-position：-210px bottom;}。bargraph ul.bars li.goldbar {background-position：-240px bo ttom;}。bargraph ul.bars li.tealbar {background-position：-270px bottom;}。label {list-style-type：none;位置：绝对; bottom：0px;保证金：0; padding：0;}。label li {color：black;文字转换：大写; letter-spacing：0.1em; font-size：11px;宽度：73px;向左飘浮; text-align：center;溢出：隐藏; font-family：Trebuchet MS，Verdana，Arial，Helvetica，sans-serif; line-height：1em;} ul.y-axis {list-style-type：none;位置：绝对;左：-45px;宽度：40px; text-align：right;底部：0;保证金：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;左：0;顶部：236px;填充：0;保证金：0; text-align：left;宽度：100％; font-family：Verdana，sans-serif; font-size：10px;颜色：黑色; line-height：1.3em;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div style =height：500px>向下滚动。 ..< / div>< div class =bargraphstyle =width：1000px> < ul class =bars> < li class =bar1 purplebar slideUpstyle =height：200px;> 100< / li> < li class =bar2 redbar slideUpstyle =height：200px;> 100< / li> < li class =bar3 bluebar slideUpstyle =height：70px;> 35< / li> < li class =bar4 greenbar slideUpstyle =height：70px;> 35< / li> < li class =bar5 orangebar slideUpstyle =height：160px;> 80< / li> < li class =bar6 navybar slideUpstyle =height：160px;> 80< / li> < li class =bar7 crimsonbar slideUpstyle =height：200px;> 100< / li> < / UL> < ul class =label> <李> Banana和LT; /锂> <李>苹果< /锂> <李>狗和LT; /锂> <李>人< /锂> <李>馅饼< /锂> <李>咖啡和LT; /锂> <李>说明与LT; /锂> < / UL> < ul class =y-axis> <李> 100℃; /锂> <李> 75℃; /锂> <李→50< /锂> <李> 25℃/锂> < / div>


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.

解决方案

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>

这篇关于动画技能栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

11-01 15:59
Powered by LMLPHP ©2024 li 0.001977