Jumpy Safari и Firefox при анимации jquery - PullRequest
Новая
       91

Jumpy Safari и Firefox при анимации jquery

0 голосов
/ 21 февраля 2019

Я пытаюсь добиться простого эффекта типа параллакса с фиксированным содержимым в каждом разделе, когда пользователь прокручивает.

Все прокручивается, как задумано, но в каждом браузере, кроме Chrome, фиксированный элемент «движение» настраиваетсямаргинальная вершина нервная и нервная, а не плавная.

Любая помощь с дрожанием или, возможно, немного другой способ сделать это очень помогли бы.Заранее спасибо.

Вот упрощенный код на CodePen https://codepen.io/mobiusint/pen/OdGavY

<div class="empty"></div>
<div class="home-parallax" id="home-slide-1">
<div class="home-parallax-bg-1"></div>
<div class="home-parallax-content">
<img src="https://placekitten.com/200/200" class="border">
</div>
</div>
</div>
<div class="empty red"></div>
<div class="home-parallax" id="home-slide-2">
<div class="home-parallax-bg-2"></div>
<div class="home-parallax-content">
<div><h1>Alot of content JUMPS in firefox & safari</h1></div>
<img src="https://placekitten.com/200/200" class="border">
<p>TEXT TEXT TEXT</p>
<img src="https://placekitten.com/200/200" class="border">
</div>
</div>
</div>

<div class="home-parallax" id="home-slide-3">
<div class="home-parallax-bg-3"></div>
<div class="home-parallax-content">
<img src="https://placekitten.com/100/100" class="border">
</div>
</div>
</div>

1 Ответ

0 голосов
/ 28 февраля 2019

Измените эту строку в вашем jQuery:

jQuery(this).css({ 'margin-top': marginTop });

Кому:

jQuery(this).css({ 'transform': translateY(marginTop) });

...