Здравствуйте, ув. разработчики. Передо мной стоит задание:
ЗАДАНИЕПроанимировать страничку, и так есть страница и она поделена на секции(an_section), в каждой секции есть data атрибут, который обозначает открылась она или еще нет. Секции внутри себя имеют елементы(an_el), в которых есть data атрибут задержки и клас самой анимации.
РЕАЛИЗАЦИЯПри прокрутке до уровня секции, мы по очереди с задержками добавляем классы елементам, как только получил клас один елемент, за ним идет второй и так всю секцию. Секции между собой могут открываться паралельно, но елементы внутри только по-очереди. https://www.pastiebin.com/5a6123bf9cf42 вот код, который я написал для этого(я не являюсь js-разработчиком, я работаю с бэком, но пришлось сделать такое), так что критика принимаеться, возможно реализацая и в корне неверная.
sreenHeight = document.documentElement.clientHeight;
$(window).on('scroll', function(){
$window = $(window);
scrollPosTop = $window.scrollTop();// + 150;
scrollPosBottom = $window.scrollTop()+sreenHeight - 100;
$('.an_section:not(.completed)').each(function(i){
blockPosTop = $(this).offset().top;
blockPosBottom = $(this).offset().top+$(this).height();
if( (scrollPosBottom >= blockPosTop && scrollPosTop < blockPosBottom) &&
$(this).data('animateStatus') == 0 ){
$(this).addClass('completed');
animateMeRek($(this), 0, $(this).find('.an_el').length);
return false;
}
});
});
function animateMeRek($container, id, countElements){
$animate_el = $container.find('.an_el').eq(id);
var old_date = new Date();
!$animate_el.data('delay') ? $delay = 0 : $delay =
$animate_el.data('delay');
setTimeout(function(){
console.log(new Date - old_date);
$this = $container.find('.an_el').eq(id);
if($this.data('animate') == 'textWrite'){
autoType(".tab-content.active .an_el", 25, 0);
}
$this.addClass($this.data('animate'));
if(id == countElements-1) $container.data('animateStatus', 1);
if(id < countElements-1) animateMeRek($container, id+1, countElements);
}, 100);
}
ПРОБЛЕМА
И так, этот код хорошо работает в мозилле, ие11, но в хроме при быстром скролле тачпадом/мышкой мы видим лишнюю задержку в 1.5 - 2с на settimeout, когда там стоит точно 100мс для експеримента.(строка 29-34). Если же скролить pg dn то никакой лишней задержки нету. Эту проблему в хроме я мог устранить только если удалял часть DOM, поэтому думаю, что нужно оптимизировать код, но как ума не приложу. Помогите пожалуйста, уже несколько дней в тупике
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости