Блог

У меня есть этот простой код анимированного линейного графика. Анимация работает хорошо, но она начинается при загрузке страницы. Я хочу, чтобы он начинался, когда раздел находится на экране средства просмотра/когда средство просмотра прокручивает этот раздел страницы.

Если ему нужен другой код, например JS. Пожалуйста, скажи мне. Спасибо!

Вот коды HTML и CSS. А вот демо-версия Codepen

HTML:

   <div class="wrapper">
    <h3>Papua New Guinea</h3>
    <br>
    <p>Papua New Guinea is one of the most culturally diverse countries in the world.
      As of 2019, it is also the most rural, as only 13.25% of its people live in urban centres.
      Most of the
      population of more than 8,000,000 people live in customary communities, which are as diverse
      as the languages.</p>
    <h5>Living in Urban communities</h5>
    <div class="line line1">13.25%</div>
    <h5>Living in Customary Communities</h5>
    <div class="line line2">86.75</div>
  </div>
 

CSS:

 .wrapper {
  width: 800px;
  margin: 0 auto;
}

.wrapper h3 {
  text-align: center;
  text-transform: uppercase;
  margin-top: 40px;
}

.wrapper h5 {
  text-align: left;
}

.line {
  height: 25px;
  min-width: 800px;
  margin: 0 auto 10px;
  line-height: 25px;
  font-size: 14px;
  color: #fff;
  padding: 0 0 0 10px;
  position: relative;
}

.line:before {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  height: 25px;
  top: 0;
  z-index: -2;
  background: #d2d6d7;
}

.line:after {
  content: "";
  background: #333;
  height: 25px;
  transition: 0, 8s;
  display: block;
  width: 100%;
  animation: animate 1 4s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.line1:after {
  max-width: 13.25%;
}

.line2:after {
  max-width: 86.75%;
}

@keyframes animate {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
 

Вы можете использовать анимацию-задержку, но это вам не поможет. Вы можете использовать код JS и отслеживать событие. Это код, например:

 var $win = $(window);
var $marker = $('#marker');
$win.scroll(function() {
    if ($win.scrollTop()   $win.height() >= $marker.offset().top) {
        $win.unbind('scroll');
        // load there
    }
});