Мне не удалось получить доступ к вашему шрифту, поэтому вместо этого я использовал css свойство color!
Чтобы отслеживать конечную точку анимации, я использовал animationiteration событие на теле. Логика c:
Если анимация завершает «нечетное количество циклов», то измените color и animation-direction, а если нет, ничего не делать .
Вот что я добавил,
$('body').on('animationiteration', function() {
if(started) {
$('body').removeClass('scrolling');
scrollTimerId = undefined;
var cycles = Math.round((Date.now() - now) / 1000);
if(cycles % 2) {
if(currColor == 'rgb(0, 128, 0)') {
currColor = 'rgb(255, 0, 0)';
animDir = 'alternate-reverse';
} else {
currColor = 'rgb(0, 128, 0)';
animDir = 'alternate';
}
}
started = false;
$('body').css('color', currColor);
console.log(currColor, animDir, cycles);
}
});
Далее, я использовал started, чтобы проверить, анимация началась или нет, и соответственно задайте свойство animation-direction только один раз .
$(document).ready(function() {
var scrollTimerId;
var currColor = 'rgb(0, 128, 0)';
var animDir = 'alternate';
var started = false;
var now;
$('body').css('color', currColor);
$(window).scroll(function() {
if(!started) {
if (!scrollTimerId)
$('body').addClass('scrolling');
$('.scrolling').css('animation-direction', animDir);
started = true;
now = Date.now();
}
clearTimeout(scrollTimerId);
scrollTimerId = setTimeout(function() {
$('body').on('animationiteration', function() {
if(started) {
$('body').removeClass('scrolling');
scrollTimerId = undefined;
var cycles = Math.round((Date.now() - now) / 1000);
if(cycles % 2) {
if(currColor == 'rgb(0, 128, 0)') {
currColor = 'rgb(255, 0, 0)';
animDir = 'alternate-reverse';
} else {
currColor = 'rgb(0, 128, 0)';
animDir = 'alternate';
}
}
started = false;
$('body').css('color', currColor);
}
});
}, 500);
});
});
@keyframes color {
0% {
color: green;
}
100% {
color: red;
}
}
.scrolling {
animation-duration: 1s;
animation-name: color;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
}
body {
font-weight: normal;
font-style: normal;
font-size: 2vw;
line-height: 2vw;
height: 300vh;
}
div {
position: fixed;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div>
<p>To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant modi conse doloria di quosam necatatiost pro voluptam quae doluptasi. To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant
modi conse doloria di quosam necatatiost pro voluptam quae doluptasi.</p>
<p>To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant modi conse doloria di quosam necatatiost pro voluptam quae doluptasi sinctot amenimodia quam, cones is et aut la voloria non rehentus eium, volorit parum re,
volorei cipidust, ut es doluptaquae coratum quide moluptaquis aut latiorrum adipitat lab ipsapicienim qui nusciun tioribus ea voluptam sim dolo experfe reratusae velitature pa pos ut et que simporrum ut ilitam, incto iunt et hitam natis net vellignimod
magnis eum re odipiti ssequib earuptatia anto mi, qui derera dipsa volorendis volum es qui consequis acernam rem consequi aut eaquiatia destemo luptur, sae volo berumqui apicia sum que mo moluptium remoluptat qui sumque nonserro officiet ditiae int
et elibus idellabore volor serum volent.</p>
<p>To in ni test ommos ratiam, nihitat istinctatum voluptatio bea ipsantur sum quod magnatusant modi conse doloria di quosam necatatiost pro voluptam quae doluptasi sinctot amenimodia quam, cones is et aut la voloria non rehentus eium, volorit parum re,
volorei cipidust, ut es doluptaquae coratum quide moluptaquis aut latiorrum adipitat lab ipsapicienim qui nusciun tioribus ea voluptam sim dolo experfe reratusae velitature pa pos ut et que simporrum ut ilitam, incto iunt et hitam natis net vellignimod
magnis eum re odipiti ssequib earuptatia anto mi, qui derera dipsa volorendis volum es qui consequis acernam rem consequi aut eaquiatia destemo luptur, sae volo berumqui apicia sum que mo moluptium remoluptat qui sumque nonserro officiet ditiae int
et elibus idellabore volor serum volent.</p>
</div>
Попробуй вживую! (за подробностями обращайтесь к консоли)
You возможно, мне интересно, почему я не использовал animationend непосредственно на body. Это связано с тем, что ваша анимация зацикливается бесконечно;)