Skrollr отображает только ключевой кадр, если я не изменю размер окна

Question

Извините, что я не знаю много JavaScript, так как я дизайнер.

У меня есть две анимации в относительном режиме, которые, когда вы первоначально просматриваете их, отображаются в их конечном ключевом кадре, даже если они должны быть в их начальном ключевом кадре (в тот момент прокрутки). Если вы каким-либо образом измените размер окна браузера, они примут правильное поведение и вернутся к начальному ключевому кадру, где они должны быть. Однако, если вы обновляете страницу снова, они всегда загружаются в конце ключевого кадра, что заставляет меня думать, что они получают неправильный размер области просмотра или позицию прокрутки.

Вот этот сайт: http://vostrocity.dreamhosters.com/

Например, следующий код отображает только его конечный ключевой кадр, если я не изменю размер окна:

<div id="venn-prototyping" class="venn" 
 data-100-top-top="transform[swing]:translate(0px,0px);" 
 data--100-top-bottom="transform[swing]:translate(-290px,600px);">
    <h2>Prototyping</h2>
</div>

У меня есть одна анимация в абсолютном режиме, которая прекрасно работает без изменения размера окна браузера.

Answer 1

Убедитесь, что вы инициализируете skrollr, когда загружены все изображения, которые влияют на макет. Например, внутри examples Элемент, есть изображения, которые влияют на высоту родительского элемента и, следовательно, на положение ваших диаграмм Венна относительно области просмотра (как только изображения загружаются, ваша диаграмма перемещается вниз). Ваша диаграмма фактически анимируется, но из-за этого смещения перед входом в область просмотра.