fix(parallax): animate background-position-y directly so SSR parallax works pre-WASM

This commit is contained in:
daniel-c-harvey
2026-06-11 14:45:30 -04:00
parent 9d7f2ff003
commit ae531116b7
5 changed files with 130 additions and 96 deletions
@@ -87,11 +87,11 @@ public abstract class ParallaxImageBase : ComponentBase, IAsyncDisposable
private string? _handle;
// --parallax-from/--parallax-to are inherited custom properties read by the
// CSS @keyframes parallax-pan (scroll-driven animation on .parallax-window).
// They encode ParallaxSpeed and InvertDirection. --parallax-pos itself is
// never set inline — an inline value would beat the CSS animation in the
// cascade and defeat the pre-WASM scroll-driven parallax. JS sets it inline
// only after WASM boots, transparently taking over (inline > animation).
// CSS @keyframes parallax-pan, which animates background-position-y on each
// .layer (scroll-driven, pre-WASM). They encode ParallaxSpeed and
// InvertDirection. After WASM boots, parallax.js sets data-parallax-active to
// cancel that animation and drives background-position-y on the layers
// directly — a clean handoff with no competing writers.
private string ParallaxVars()
{
var end = (int)Math.Round(ParallaxSpeed * 100);