Анимация при прокрутке до блока ver.2

by Qwerty_Wasd

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam tenetur debitis quisquam veniam voluptate ut quis magni praesentium, consequuntur fugiat itaque obcaecati quia adipisci quidem nobis architecto ratione expedita quos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam tenetur debitis quisquam veniam voluptate ut quis magni praesentium, consequuntur fugiat itaque obcaecati quia adipisci quidem nobis architecto ratione expedita quos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam tenetur debitis quisquam veniam voluptate ut quis magni praesentium, consequuntur fugiat itaque obcaecati quia adipisci quidem nobis architecto ratione expedita quos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam tenetur debitis quisquam veniam voluptate ut quis magni praesentium, consequuntur fugiat itaque obcaecati quia adipisci quidem nobis architecto ratione expedita quos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam tenetur debitis quisquam veniam voluptate ut quis magni praesentium, consequuntur fugiat itaque obcaecati quia adipisci quidem nobis architecto ratione expedita quos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam tenetur debitis quisquam veniam voluptate ut quis magni praesentium, consequuntur fugiat itaque obcaecati quia adipisci quidem nobis architecto ratione expedita quos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam tenetur debitis quisquam veniam voluptate ut quis magni praesentium, consequuntur fugiat itaque obcaecati quia adipisci quidem nobis architecto ratione expedita quos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam tenetur debitis quisquam veniam voluptate ut quis magni praesentium, consequuntur fugiat itaque obcaecati quia adipisci quidem nobis architecto ratione expedita quos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam tenetur debitis quisquam veniam voluptate ut quis magni praesentium, consequuntur fugiat...

CSS

body {
  background-color: #1b1a1a;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
}
 
.ProgressBar,
.ProgressBar-contentCircle {
  display: table;
  height: 210px;
  position: absolute;
  width: 210px;
}
 
.ProgressBar-circle,
.ProgressBar-background {
  fill: none;
  stroke: #D00463;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  position: relative;
  z-index: 10;
}
 
.ProgressBar-background {
  stroke: white;
  stroke-width: 4;
  z-index: 0;
}
 
.ProgressBar-percentage {
  color: #389ba6;
  font-size: 40px;
  text-align: center;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}
 
/************************/
/* structure de la page */
/************************/
.Content {
  height: 270px;
 
  width: 100%;
}
 
.List {
  display: flex;
  list-style: none;
  margin: 10px auto;
  padding: 0px;
  width: 840px;
  height: 210px;
}
 
.List-item {
  float: left;
  width: 210px;
}
 
.Title {
  text-align: center;
}

JavaScript

(function ($){
 
    $.fn.bekeyProgressbar = function(options){
 
        options = $.extend({
            animate     : true,
          animateText : true
        }, options);
 
        var $this = $(this);
      
        var $progressBar = $this;
        var $progressCount = $progressBar.find('.ProgressBar-percentage--count');
        var $circle = $progressBar.find('.ProgressBar-circle');
        var percentageProgress = $progressBar.attr('data-progress');
        var percentageRemaining = (100 - percentageProgress);
        var percentageText = $progressCount.parent().attr('data-progress');
      
        //Calcule la circonference du cercle
        var radius = $circle.attr('r');
        var diameter = radius * 2;
        var circumference = Math.round(Math.PI * diameter);
 
        //Calcule le pourcentage d'avancement
        var percentage =  circumference * percentageRemaining / 100;
 
        $circle.css({
          'stroke-dasharray' : circumference,
          'stroke-dashoffset' : percentage
        })
        
        //Animation de la barre de progression
        if(options.animate === true){
          $circle.css({
            'stroke-dashoffset' : circumference
          }).animate({
            'stroke-dashoffset' : percentage
          }, 3000 )
        }
        
        //Animation du texte (pourcentage)
        if(options.animateText == true){
 
          $({ Counter: 0 }).animate(
            { Counter: percentageText },
            { duration: 3000,
             step: function () {
               $progressCount.text( Math.ceil(this.Counter) + '%');
             }
            });
 
        }else{
          $progressCount.text( percentageText + '%');
        }
      
    };
 
})(jQuery); 

$(document).ready(function() {
var flagVision = true;//устанавливаем переменную состояния анимации
	$(window).scroll(function() { 
		if (($(window).scrollTop() + $(window).height()) >= ($(".Content").offset().top + $(".List").height() ) && flagVision) {   ...