断断续续 JavaScript background-position-y 的动画

Question

所以我遇到的实际问题是我想要一个固定的背景图像效果，同时保持背景图像足够宽以填充容器。不幸的是，CSS 方式，使用 background-attachment:fixed; 只会相对于视口定位图像。这会在宽高比与背景图像截然不同的屏幕尺寸上产生问题，导致背景图像（人的照片）出现不必要的剪裁。

我目前找到的解决方案是使用 background-size: contain 来防止在通过动画 background-position-y 和 JavaScript 模拟 background-attachment: fixed 时在所有屏幕尺寸上裁剪图像] 卷轴上。问题是，如果我随后单击导致页面下方出现 scrollTop 动画的按钮，图像的 background-position-y 设置就会不稳定。

知道如何防止动画中出现这种抖动吗？

// Banner scroll function
    var scrollTop = $(window).scrollTop();
    var banner = $('.hero-banner').css('background-position-y',scrollTop+'px');
    var debounced_fixBG = function(){
        var newScrollTop = $(window).scrollTop();
        banner.css('background-position-y',newScrollTop+'px');
        scrollTop = newScrollTop;
    };
    $(window).scroll(debounced_fixBG);
    
     $('.scroll-down').on('click',function(){
        $('html,body').animate({
            easing: 'swing',
            scrollTop: $('#anchor').offset().top
        },2000);
    });

.hero-banner {
  background-image: url('http://londonprogressivejournal.com/site_images/741.jpg');
  height: 383px;
  background-repeat: no-repeat;
  background-attachment: contain;
  background-position-y: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button class="scroll-down">
Scroll Down
</button>
<div class="hero-banner">
&nbsp;
</div>
<br>
<br>
<br>
<br>
<br>
<a id="anchor">Anchor</a>

Answer 1

您可以在 .hero-banner 元素

处将 transition 属性设置为 background-position-y .5s ease-in-out

// Banner scroll function
    var scrollTop = $(window).scrollTop();
    var banner = $('.hero-banner').css('background-position-y',scrollTop+'px');
    var debounced_fixBG = function(){
        var newScrollTop = $(window).scrollTop();
        banner.css('background-position-y',newScrollTop+'px');
        scrollTop = newScrollTop;
    };
    $(window).scroll(debounced_fixBG);
    
     $('.scroll-down').on('click',function(){
        $('html,body').animate({
            easing: 'swing',
            scrollTop: $('#anchor').offset().top
        },2000);
    });

.hero-banner {
  background-image: url('http://londonprogressivejournal.com/site_images/741.jpg');
  height: 383px;
  background-repeat: no-repeat;
  background-attachment: contain;
  background-position-y: top;
  transition: background-position-y .5s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button class="scroll-down">
Scroll Down
</button>
<div class="hero-banner">
&nbsp;
</div>
<br>
<br>
<br>
<br>
<br>
<a id="anchor">Anchor</a>

Answer 2

jQuery 动画往往是断断续续的，因为它非常高级；您的计算机需要计算很多东西才能制作动画。如果我是你，我会使用原生 CSS 解决方案。 Here 是一些很好的教程。

Answer 3

发布评论中的答案：

您可以同时使用 background-attachment:fixed; 和 background-size:contain;，并通过使用 background-position-y:[height of top element]; 偏移图像来避免顶部剪切。

Answer 4

除了上述答案之外，尝试使用固定位置而不是在滚动时移动元素。会顺畅很多。

断断续续 JavaScript background-position-y 的动画

Choppy JavaScript Animation of background-position-y

javascript

animation

background-image

background-position

background-attachment