Как отложить загрузку html / css, пока элемент не появится в окне просмотра

Question

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

HTML & CSS можно увидеть ниже:

.chart[data-percent='100'] .outer {
  stroke-dashoffset: 0;
  -webkit-animation: show100 2s;
  animation: show100 2s;
}

.chart[data-percent='96'] .outer {
  stroke-dashoffset: 22;
  -webkit-animation: show96 2s;
  animation: show96 2s;
}

.chart[data-percent='77'] .outer {
  stroke-dashoffset: 123;
  -webkit-animation: show75 2s;
  animation: show75 2s;
}

.chart[data-percent='75'] .outer {
  stroke-dashoffset: 133;
  -webkit-animation: show75 2s;
  animation: show75 2s;
}

.chart[data-percent='52'] .outer {
  stroke-dashoffset: 257;
  -webkit-animation: show52 2s;
  animation: show52 2s;
}

.chart[data-percent='50'] .outer {
  stroke-dashoffset: 267;
  -webkit-animation: show50 2s;
  animation: show50 2s;
}

.chart[data-percent='25'] .outer {
  stroke-dashoffset: 401;
  -webkit-animation: show25 2s;
  animation: show25 2s;
}

@-webkit-keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes show96 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 22;
  }
}

@keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 124;
  }
}

@-webkit-keyframes show52 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 257;
  }
}

@-webkit-keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 267;
  }
}

@keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }
  to {
    stroke-dashoffset: 401;
  }
}

<div class="row stat-wheel">
  <div class="col-sm-4">
    <p class="stat-figure">52%</p>
    <figure class="chart" data-percent="52">
      <svg width="200" height="200">
        <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
      </svg>
    </figure>
    <p class="white center">increase in sales generated through campaigns</p>
  </div>
  <div class="col-sm-4">
    <p class="stat-figure">77%</p>
    <figure class="chart" data-percent="77">
      <svg width="200" height="200">
        <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
      </svg>
    </figure>
    <p class="white center">return on investment in the first 2 months</p>
  </div>
  <div class="col-sm-4">
    <p class="stat-figure">96%</p>
    <figure class="chart" data-percent="96">
      <svg width="200" height="200">
        <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
      </svg>
    </figure>
    <p class="white center">increase in the quality of sales leads generated</p>
  </div>
</div>

Answer 1

Вы можете проверить наблюдателя пересечения API , он сообщает вам, когда элемент становится видимым в вашем окне просмотра. Вы можете прослушать его и запустить анимацию.

Answer 2

JavaScript библиотека для анимации элементов при их прокрутке.

https://scrollrevealjs.org/

Answer 3

Очень чистый способ - использовать ваниль JS. Ссылка с объяснением

// (c) 2017 Chris Ferdinandi
var isInViewport = function (elem) {
    var distance = elem.getBoundingClientRect();
    return (
        distance.top >= 0 &&
        distance.left >= 0 &&
        distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        distance.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

var findMe = document.querySelector('.row stat-wheel');

window.addEventListener('scroll', function (event) {
    if (isInViewport(findMe)) {
        console.log('In viewport!');
    } else {
    console.log('Nope...');
  }
}, false);