Активация элемента при наведении

@L13K · Регистрация: 03.12.2011

Студворк — интернет-сервис помощи студентам

имеется элемент страницы - круги на которых анимация подсчета "чеголибо".

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

код сей беды - ниже

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="Content">
<ul class="List">
  <li class="List-item">
        <div class="ProgressBar ProgressBar--animateAll" data-progress="30">
        <svg class="ProgressBar-contentCircle">
                <!-- on défini le l'angle et le centre de rotation du cercle -->
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-background" cx="100" cy="100" r="95" />
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-circle" cx="100" cy="100" r="95" />
        <span class="ProgressBar-percentage ProgressBar-percentage--count"></span>
            </svg>
        </div>
 
  </li>
 
 
 
  <li class="List-item">
        <div class="ProgressBar ProgressBar--animateAll1" data-progress="20">
        <svg class="ProgressBar-contentCircle">
                <!-- on défini le l'angle et le centre de rotation du cercle -->
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-background" cx="100" cy="100" r="95" />
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-circle" cx="100" cy="100" r="95" />
        <span class="ProgressBar-percentage ProgressBar-percentage--count"></span>
            </svg>
        </div>
 
  </li>
 
 
  <li class="List-item">
        <div class="ProgressBar ProgressBar--animateAll2" data-progress="50">
        <svg class="ProgressBar-contentCircle">
                <!-- on défini le l'angle et le centre de rotation du cercle -->
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-background" cx="100" cy="100" r="95" />
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-circle" cx="100" cy="100" r="95" />
        <span class="ProgressBar-percentage ProgressBar-percentage--count"></span>
            </svg>
        </div>
 
 
 </li>
    
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
(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(){
  
  $('.ProgressBar--animateNone').bekeyProgressbar({
    animate : false,
    animateText : false
  });
  
  $('.ProgressBar--animateCircle').bekeyProgressbar({
    animate : true,
    animateText : false
  });
  
  $('.ProgressBar--animateText').bekeyProgressbar({
    animate : false,
    animateText : true
  });
  
  $('.ProgressBar--animateAll').bekeyProgressbar();
 
$('.ProgressBar--animateAll1').bekeyProgressbar();
  
$('.ProgressBar--animateAll2').bekeyProgressbar();
 
})

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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;
}

Qwerty_Wasd · 04.09.2017, 00:44

L13K, надо было вставить весь код страницы. Ответ был бы точнее. А так вот вам пример из того что есть. Песочница

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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 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.</p>
<div class="Content">
<ul class="List">
  <li class="List-item">
        <div class="ProgressBar ProgressBar--animateAll" data-progress="30">
        <svg class="ProgressBar-contentCircle">
                <!-- on dГ©fini le l'angle et le centre de rotation du cercle -->
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-background" cx="100" cy="100" r="95" />
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-circle" cx="100" cy="100" r="95" />
        <span class="ProgressBar-percentage ProgressBar-percentage--count"></span>
            </svg>
        </div>
 
  </li>
 
 
 
  <li class="List-item">
        <div class="ProgressBar ProgressBar--animateAll1" data-progress="20">
        <svg class="ProgressBar-contentCircle">
                <!-- on dГ©fini le l'angle et le centre de rotation du cercle -->
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-background" cx="100" cy="100" r="95" />
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-circle" cx="100" cy="100" r="95" />
        <span class="ProgressBar-percentage ProgressBar-percentage--count"></span>
            </svg>
        </div>
 
  </li>
 
 
  <li class="List-item">
        <div class="ProgressBar ProgressBar--animateAll2" data-progress="50">
        <svg class="ProgressBar-contentCircle">
                <!-- on dГ©fini le l'angle et le centre de rotation du cercle -->
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-background" cx="100" cy="100" r="95" />
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-circle" cx="100" cy="100" r="95" />
        <span class="ProgressBar-percentage ProgressBar-percentage--count"></span>
            </svg>
        </div>
 
 
 </li>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
(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() { // Ждём загрузки страницы
    $(window).scroll(function()/*ф-я скролла для объекта окно*/ {
        if ($(this).scrollTop() > 500)/*отсчитываем кол-во пикселей до блока*/ {
                 /*сюда тянем ваш скрипт анимации*/
            $('.ProgressBar--animateNone').bekeyProgressbar({
    animate : false,
    animateText : false
  });
  
  $('.ProgressBar--animateCircle').bekeyProgressbar({
    animate : true,
    animateText : false
  });
  
  $('.ProgressBar--animateText').bekeyProgressbar({
    animate : false,
    animateText : true
  });
  
  $('.ProgressBar--animateAll').bekeyProgressbar();
 
$('.ProgressBar--animateAll1').bekeyProgressbar();
  
$('.ProgressBar--animateAll2').bekeyProgressbar();
        }
    });
});

Добавлено через 5 минут
Плагины опять же есть..типа WOW.js

@L13K · 04.09.2017, 01:55 **[ТС]**

https://jsfiddle.net/ghmyn8s3/1/

wow js конечно попробую. но мне надо разобраться в проблеме.

я поправил. по ссылке все робит.

Добавлено через 35 минут
зы жаль тему редактировать нельзя

@L13K · 05.09.2017, 07:52 **[ТС]**

wow js не помог. появляется уже законченная анимация, пока успеваю туда долистать.

проблема актуальна, хелп. по ссылочке выше - можно посмотреть скрипт.

Qwerty_Wasd · 05.09.2017, 18:21

L13K, я же дал вам исправленный код(с комментариями в исправленном) выше и ссылку на песочницу. Посмотрите всю тему

@L13K · 05.09.2017, 20:12 **[ТС]**

там сам скрипт не запускается. я только 3 розовых круга вижу, по которым прогресс не идет. сравните с моей последней ссылкой.

(вероятно я изначально код с ошибкой дал)

@L13K · 07.09.2017, 14:00 **[ТС]**

а. все затупил. сори все работает. спасибо огромное

Добавлено через 18 минут
теперь новая проблема. стоить дернуть прокрутку колесиком на пару мм. и анимация начинается вновь.

Добавлено через 3 минуты
т.е. при движении вниз. ниже обозначенного интервала - анимация перезагружается. а при движении вверх - все ок

Qwerty_Wasd · 07.09.2017, 19:24

L13K, достаточно добавить отслеживаемый флаг. Вот измененный вариант =>Песочница<=

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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 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.</p>
<div class="Content">
<ul class="List">
  <li class="List-item">
        <div class="ProgressBar ProgressBar--animateAll" data-progress="30">
        <svg class="ProgressBar-contentCircle">
                <!-- on dГ©fini le l'angle et le centre de rotation du cercle -->
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-background" cx="100" cy="100" r="95" />
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-circle" cx="100" cy="100" r="95" />
        <span class="ProgressBar-percentage ProgressBar-percentage--count"></span>
            </svg>
        </div>
  </li>
  <li class="List-item">
        <div class="ProgressBar ProgressBar--animateAll1" data-progress="20">
        <svg class="ProgressBar-contentCircle">
                <!-- on dГ©fini le l'angle et le centre de rotation du cercle -->
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-background" cx="100" cy="100" r="95" />
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-circle" cx="100" cy="100" r="95" />
        <span class="ProgressBar-percentage ProgressBar-percentage--count"></span>
            </svg>
        </div>
  </li>
  <li class="List-item">
        <div class="ProgressBar ProgressBar--animateAll2" data-progress="50">
        <svg class="ProgressBar-contentCircle">
                <!-- on dГ©fini le l'angle et le centre de rotation du cercle -->
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-background" cx="100" cy="100" r="95" />
        <circle transform="rotate(-90, 100, 100)" class="ProgressBar-circle" cx="100" cy="100" r="95" />
        <span class="ProgressBar-percentage ProgressBar-percentage--count"></span>
            </svg>
        </div> 
 </li>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
(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) {    
            $('.ProgressBar--animateNone').bekeyProgressbar({
    animate : false,
    animateText : false
  });
  
  $('.ProgressBar--animateCircle').bekeyProgressbar({
    animate : true,
    animateText : false
  });
  
  $('.ProgressBar--animateText').bekeyProgressbar({
    animate : false,
    animateText : true
  });
  
  $('.ProgressBar--animateAll').bekeyProgressbar();
 
$('.ProgressBar--animateAll1').bekeyProgressbar();
  
$('.ProgressBar--animateAll2').bekeyProgressbar();
flagVision = false;//меняем состояние анимации на disable
        }
    });
});

@L13K · 08.09.2017, 11:35 **[ТС]**

бред какой то. в песочнице робит - на сайте 1в1 скопированный скрипт - нет.
вот пример http://coderange.ru/pizdos/test.php

я так понял что вы поставили условие: если прокрутка от топа + высота окна - больше или равна сумме блоков лист и контент - анимацию активирует?

не совсем понимаю.. тем более не понимаю почему копия всего содержимого песочницы - без дополнений не работает.

Qwerty_Wasd · 08.09.2017, 22:16

L13K, вот рабочий пример. Проверил на мозиле, опере, хроме. Прикладываю архивом, так как редактор принимает только 15000 символов.

@L13K · 09.09.2017, 20:12 **[ТС]**

тяжелый случай какой то. скрипт считает скролл текста, но не считает скролл дивов.
вобщем вписал + 3500 в уравнение - результат меня полностью устроил. спасибо вам!

Новые блоги и статьи Все статьи Все блоги /
Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .

Активация элемента при наведении

Решение

Решение

@L13K 0 / 0 / 1 Регистрация: 03.12.2011 Сообщений: 136
	04.09.2017, 01:55 [ТС]
	https://jsfiddle.net/ghmyn8s3/1/ wow js конечно попробую. но мне надо разобраться в проблеме. я поправил. по ссылке все робит. Добавлено через 35 минут зы жаль тему редактировать нельзя 0

@L13K 0 / 0 / 1 Регистрация: 03.12.2011 Сообщений: 136
	05.09.2017, 07:52 [ТС]
	wow js не помог. появляется уже законченная анимация, пока успеваю туда долистать. проблема актуальна, хелп. по ссылочке выше - можно посмотреть скрипт. 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	05.09.2017, 18:21
	Сообщение было отмечено L13K как решение Решение L13K, я же дал вам исправленный код(с комментариями в исправленном) выше и ссылку на песочницу. Посмотрите всю тему 0

@L13K 0 / 0 / 1 Регистрация: 03.12.2011 Сообщений: 136
	05.09.2017, 20:12 [ТС]
	там сам скрипт не запускается. я только 3 розовых круга вижу, по которым прогресс не идет. сравните с моей последней ссылкой. (вероятно я изначально код с ошибкой дал) 0

@L13K 0 / 0 / 1 Регистрация: 03.12.2011 Сообщений: 136
	07.09.2017, 14:00 [ТС]
	а. все затупил. сори все работает. спасибо огромное Добавлено через 18 минут теперь новая проблема. стоить дернуть прокрутку колесиком на пару мм. и анимация начинается вновь. Добавлено через 3 минуты т.е. при движении вниз. ниже обозначенного интервала - анимация перезагружается. а при движении вверх - все ок 0

@L13K 0 / 0 / 1 Регистрация: 03.12.2011 Сообщений: 136
	08.09.2017, 11:35 [ТС]
	бред какой то. в песочнице робит - на сайте 1в1 скопированный скрипт - нет. вот пример http://coderange.ru/pizdos/test.php я так понял что вы поставили условие: если прокрутка от топа + высота окна - больше или равна сумме блоков лист и контент - анимацию активирует? не совсем понимаю.. тем более не понимаю почему копия всего содержимого песочницы - без дополнений не работает. 0

@L13K 0 / 0 / 1 Регистрация: 03.12.2011 Сообщений: 136
	09.09.2017, 20:12 [ТС]
	тяжелый случай какой то. скрипт считает скролл текста, но не считает скролл дивов. вобщем вписал + 3500 в уравнение - результат меня полностью устроил. спасибо вам! 0