Я использую переменный шрифт и хотел бы анимировать его с помощью @keyframes при прокрутке, а затем не анимировать, когда пользователь прекращает прокрутку.
Я могу заставить анимацию работать, однако, когда вы прекращаете прокрутку, анимация останавливается и возвращается в исходное положение, что делает ее очень дерганой.
Чтобы сделать его более плавным, мне интересно, есть ли способ, которым, когда пользователь перестает прокручивать, можно получить текущую позицию анимации, а затем завершить этот цикл анимации, а затем остановить, вместо немедленной привязки вернуться в исходное положение?
Поскольку я не могу загрузить переменный шрифт в jsfiddle с помощью @font-face, я разместил его здесь: http://slug.directory/GX/
Вот жс...
$(document).ready(function() {
var scrollTimerId;
$(window).scroll(function() {
if (!scrollTimerId)
$('body').addClass('scrolling');
clearTimeout(scrollTimerId);
scrollTimerId = setTimeout(function(){
$('body').removeClass('scrolling');
scrollTimerId = undefined;
},150);
});
});
и ссс...
@keyframes changewidth {
0% {
font-variation-settings: 'wght' 1;
}
100% {
font-variation-settings: 'wght' 100;
}
}
.scrolling {
animation-duration: 0.5s;
animation-name: changewidth;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
}
body {
font-family: "AG GX", Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
font-size: 2vw;
line-height: 2vw;
font-variation-settings: 'wght' 1;
height: 300vh;
}
div {
position: fixed;
}
Заранее спасибо!
