Я пытаюсь анимировать ось переменного шрифта в Javascript, ось называется «FLUX», и это влияет на вертикальное перемещение в переменном шрифте.Я получил эту часть для работы в CSS, однако я также хотел бы, чтобы вторая ось, wdth, соответствовала ширине области просмотра.Я получил это, чтобы работать, но в Javascript.
Теперь проблема в том, что оба не будут работать одновременно.Я чувствую, что способ заставить это работать - анимировать обе оси в Javascript, однако я не могу понять, как добиться анимации FLUX в Javascript, только CSS.
Я включил ссылку Codepenк тому, над чем я работал, вы можете видеть, что Javascript работает, когда анимация CSS отключена, но при включенном CSS, кажется, переопределяет Javascript.
https://codepen.io/Xenitos/pen/YMbboX
HTML
<html>
<head>
<meta charset="UTF-8" />
<title>Test Responsive Width</title>
<body>
<div class="rapper">
<h1 id="title">Flux</h1>
</div>
</body>
</html>
CSS
body{
padding: 0;
margin: 0;
}
.rapper{
padding: 20px;
}
#title{
font-size: 20vw;
color: black;
font-family:"Flux";
text-transform:uppercase;
font-variation-settings: 'wdth' 400;
animation: title infinite;
animation-duration: 15s;
animation-timing-function: ease;
}
@keyframes title {
0% {font-variation-settings:"FLUX" 400 ; }
50% {font-variation-settings:"FLUX" 700 ; }
100% {font-variation-settings:"FLUX" 400 ;}
}
JAVASCRIPT
$( document ).ready(function() {
// Variables
var $window = $(window);
$window.resize(function(){
$('#title').css('fontVariationSettings', "'wdth'" + ($window.width()-450)*100/(1920-450)*4);
})
});
// End temp code for seeing browser width
Ожидаемый результат заключается в том, чтоширина обзора связана с осью 'wdth' шрифта, а ось 'FLUX' анимирована на бесконечном цикле.
Есть ли что-то, чего я пропускаю, или кто-то может помочь мне выполнить этополностью в Javascript?