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

Question

[nanashi2160]

codepen.io/tamak/pen/hzEer – здесь лежит анимация прогресс баров. Что нужно изменить, или добавить, чтобы они активировались во время скролла?

Этот код был беспощадно изнасилован множественными нагугленными способами, но все тщетно.

jQuery(document).ready(function(){
  jQuery('.skillbar').each(function(){
    jQuery(this).find('.skillbar-bar').animate({

      width:jQuery(this).attr('data-percent')
    },6000);
  });

});

Вообще, решение вопроса описано в этом посте . Но поскольку я совершенно не понимаю последовательность работы элементов в JS-коде, я не могу применить его на нашем примере – у меня все ломается. Помогите новичку, пожалуйста. Как применить .start для запуска анимации?

Answer 1

[Alexander Lashchevsky]

Можно попробовать вот такой код:

$(document).ready(function(){

	var $block = $(".XXXXXX");

	$(window).scroll(function(){
		if ( $(this).scrollTop() > ZZZ ){
			$block.addClass("YYYYYY");
		} 
	});
});

Данный код добавляет блоку XXXXXX класс YYYYYY при скролле ZZZ пикселей. Т.е. если пользователь проскроллил ZZZ пикселей от верха страницы, YYYYYY добавится для XXXXXX. YYYYYY может послужить инициатором анимации.

Т.е. есть блок XXXXXX.
Анимация для этого блока забиндена на класс YYYYYY.
Если пользователь проскроллил ZZZ - она активируется. Если нужно активировать сразу (т.е. даже если палец хоть немного передвинул колёсико мышки), то вместо ZZZ поставьте 1.

А вообще киньте полностью Ваш код, посмотрим, если сами не разберётесь.

Пример.

И чего Вам не спится в 8 часов утра в выходной день?

Comments

[nanashi2160]

Окей, я добавлю пикселей до блока, в котором лежит анимация, но главный вопрос вот в чем: как внедрить этот отрывок кода в код прогресс баров с codepen.io?
Что касается моего кода, то его нет смысла скидывать, потому что я брал код по опубликованной выше ссылке. Этот блок со скилл-барами работает автономно, и конкретно его нужно просто дополнить.

p.s. зарядка для ума в выходные :)

[Ilya Korablev]

Думаю, стоило бы для .block прописать position: fixed;

[Alexander Lashchevsky]

nanashi2160: в таком случае, я не до конца понял, что конкретно Вам нужно и не могу адаптировать код...