Question

我使用animantion来设置百分比动画条，但是它在javascript中，我已经看到了为CSS动画做到这一点的答案，但我没有找到任何东西来激活动画用户到达带有栏的部分。

使用我的代码，动画在页面加载的同一时刻加载，我需要在内容处于视图时加载它，因为它不是第一部分，如果用户没有动画它的动画无法看到它。

感谢您帮助我 Fiddle

这是我的javascript：

jQuery(document).ready(function() {
    jQuery('.skillbar').each(function() {
        jQuery(this).find('.skillbar-bar').animate({
            width: jQuery(this).attr('data-percent')
        }, 2500);
    });
});

Answer 1

对我来说效果很好。为此，您需要使用Lasy Load

jQuery(document).ready(function() {
  jQuery('.skillbar').each(function() {
    jQuery(this).find('.skillbar-bar').animate({
      width: jQuery(this).attr('data-percent')
    }, 2500);
  });
});

#home {
  height: 100%;
  background-color: wheat;
}
#skills {
  background-color: lightslategrey;
  height: 100%;
}
h1 {
  margin: 0 0;
  padding-top: 5%;
  font-size: 2rem;
  font-family: 'roboto';
  color: white;
  text-align: center;
}
.container-skillbar {
  width: 70%;
  padding-top: 5%;
  padding-left: 10%;
  height: auto;
  overflow: none;
}
.skillbar {
  position: relative;
  display: block;
  margin-bottom: 4%;
  width: 100%;
  background: lightgrey;
  height: 30px;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -webkit-transition: 0.4s ease-in-out;
  -moz-transition: 0.4s ease-in-out;
  -ms-transition: 0.4s ease-in-out;
  -o-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -ms-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
}
.skillbar-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 18%;
  font-weight: bold;
  font-size: 1.1em;
  color: #fff;
  background: #6adcfa;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.skillbar-title span {
  display: block;
  text-align: center;
  background: rgba(0, 0, 0, 0.15);
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
  font-family: 'roboto';
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.skillbar-bar {
  height: 30px;
  width: 0px;
  padding-left: 25px;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.skill-bar-percent {
  position: absolute;
  right: 10px;
  top: 0px;
  font-family: 'roboto';
  font-weight: 900;
  height: 30px;
  line-height: 30px;
  color: #black;
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <section id="home">

  </section>

  <section id="skills">
    <h1>Mes compétences</h1>
    <div class="container-skillbar">
      <div class="skillbar clearfix " data-percent="75%">
        <div class="skillbar-title" style="background: #186998;"><span>Photoshop</span>
        </div>
        <div class="skillbar-bar" style="background: #2697d8;"></div>
        <div class="skill-bar-percent">75%</div>
      </div>
      <!-- Ende Skill Bar -->

      <div class="skillbar clearfix " data-percent="70%">
        <div class="skillbar-title" style="background: #aa631d;"><span>Illustrator</span>
        </div>
        <div class="skillbar-bar" style="background: #e17d1a;"></div>
        <div class="skill-bar-percent">70%</div>
      </div>
      <!-- Ende Skill Bar -->

      <div class="skillbar clearfix " data-percent="50%">
        <div class="skillbar-title" style="background: #a52b7b;"><span>Indesign</span>
        </div>
        <div class="skillbar-bar" style="background: #df3fa8;"></div>
        <div class="skill-bar-percent">50%</div>
      </div>
      <!-- Ende Skill Bar -->

      <div class="skillbar clearfix " data-percent="65%">
        <div class="skillbar-title" style="background: #821c83;"><span>Premiere</span>
        </div>
        <div class="skillbar-bar" style="background: #b91ebb;"></div>
        <div class="skill-bar-percent">65%</div>
      </div>
      <!-- Ende Skill Bar -->

      <div class="skillbar clearfix " data-percent="45%">
        <div class="skillbar-title" style="background: #611983;"><span>After Effect</span>
        </div>
        <div class="skillbar-bar" style="background: #a726e3;"></div>
        <div class="skill-bar-percent">45%</div>
      </div>
      <!-- Ende Skill Bar -->

      <div class="skillbar clearfix " data-percent="75%">
        <div class="skillbar-title" style="background: #e34e26;"><span>HTML5</span>
        </div>
        <div class="skillbar-bar" style="background: #f16528;"></div>
        <div class="skill-bar-percent">75%</div>
      </div>

      <div class="skillbar clearfix " data-percent="50%">
        <div class="skillbar-title" style="background: #016fba;"><span>CSS3</span>
        </div>
        <div class="skillbar-bar" style="background: #2aa9e0;"></div>
        <div class="skill-bar-percent">50%</div>
      </div>

      <div class="skillbar clearfix " data-percent="35%">
        <div class="skillbar-title" style="background: #16337e;"><span>Jquery</span>
        </div>
        <div class="skillbar-bar" style="background: #1d45aa;"></div>
        <div class="skill-bar-percent">35%</div>
      </div>
      <!-- Ende Skill Bar -->
    </div>
    <!-- Ende container Skill Bar -->
  </section>

</body>

Answer 2

一个简单的例子：

var check_is_in_view = function(elm){
    var bounds = elm.getBoundingClientRect();
    return bounds.top < window.innerHeight && bounds.bottom > 0;
}
var your_element = document.getElementById("foo");
var result = check_is_in_view(your_element);
console.log(result);

希望，这有帮助。

更新：https://jsfiddle.net/0pj91p2z/

在视图上激活javascript动画

2 个答案: