Преобразование временной шкалы CSS-анимации в кросс-браузерный JavaScript
Я написал эффект CSS-анимации/параллакса, который работает с animation-timeline, и мне нравится результат.
Это код
[data-section-id = "66d153c7fa59f85ae17bdd36"] video {
position : absolute;
top : 0;
height: 66vh!important;
translate: 0 0vh;
animation: parallax 1s linear both;
animation-timeline: scroll(root);
animation-range: cover 30% cover 66%;
}
@keyframes parallax {
from {
translate : 0 0vh;
}
to {
translate: 0 -33vh;
}
}
Элемент видео находится в контейнере с 33vh, и при прокрутке сверху вниз он должен анимировать положение с помощью перевода, чтобы достичь конца экрана.
Поскольку на данный момент он не работает в Safari и Mozilla, я хочу использовать этот опросник https://github.com/flackr/scroll-timeline, чтобы сделать его кроссбраузерным.
Информация о плагине предполагает, что я могу заставить CSS-анимацию работать кроссбраузерно, но, судя по моим тестам, она работает только с помощью JavaScript. Поэтому я хочу преобразовать приведенную выше анимацию прокрутки CSS в JavaScript.
Вот где я сейчас
var videoElement = document.querySelector('[data-section-id = "66d339fcaa91932c1202ad7e"] video');
var scrollTimeline2 = new ScrollTimeline({
source: document.documentElement,
axis: "block",
orientation: 'block'
});
videoElement.animate(
{ transform: ["translateY(0)", "translateY(-33vh)"]},
{
duration: 1000,
fill: 'both',
timeline: scrollTimeline2
}
);
Это создает небольшой эффект параллакса, но не такой, как в коде CSS.
Я думаю, что мне нужно указать rangeStart и rangeEnd для второго аргумента (объекта) .animate, но я не могу определить формат.
Я попробовал это, но это мешает работе всего эффекта параллакса.
videoElement.animate(
{ transform: ["translateY(0)", "translateY(-33vh)"]},
{
duration: 1000,
fill: 'both',
timeline: scrollTimeline2,
rangeStart: "cover 30%",
rangeEnd: "cover 66%",
}
);
Из документации Animate https://developer.mozilla.org/en-US/docs/Web/API/Element/animate#rangeend формат должен быть действительным.
Может кто-нибудь помочь, пожалуйста?
@JaromandaX они говорят о полифиле.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
После многих проб и ошибок и просмотра документации я пришел к этому
var videoElement = document.querySelector('[data-section-id = "66d339fcaa91932c1202ad7e"] video');
var scrollTimeline2 = new ScrollTimeline({
source: document.documentElement,
axis: "block",
orientation: 'block'
});
videoElement.animate(
{ transform: ["translateY(0)", "translateY(-33vh)"]},
{
duration: 1000,
fill: 'both',
timeline: scrollTimeline2,
rangeStart: (function() {
if ( new ScrollTimeline() instanceof AnimationTimeline ) {
return {
rangeName: 'cover',
offset: CSS.percent('70'),
}
} else {
return new CSSUnitValue(70, 'percent')
}
})(),
rangeEnd: (function() {
if ( new ScrollTimeline() instanceof AnimationTimeline ) {
return {
rangeName: 'cover',
offset: CSS.percent('100'),
}
} else {
return new CSSUnitValue(100, 'percent')
}
})()
}
);
В браузерах, поддерживающих ScrollTimeline , я использовал объект для rangeStart и rangeEnd. Они не работают с полифиллом.
Для браузеров, которым нужен полифилл, я использовал функцию CSSUnitValue(), которая также происходит из полифилла, но присутствует в браузерах, которые его поддерживают.
Причина, по которой я проверяю, используется ли полифилл с new ScrollTimeline() instanceof AnimationTimeline, заключается в том, что когда я использую CSSUnitValue для встроенной поддержки, в конечном результате он ведет себя по-другому. В моем случае очень небольшой эффект параллакса.
вы упоминаете «кроссбраузерность» — но вы используете только семейство Chromium
animation-timelineиScrollTimelineЭкспериментальные функции — так что вам придется подумать еще раз