1

したがって、私が抱えている実際の問題は、背景画像をコンテナを埋めるのに十分な幅に保ちながら、背景画像効果を固定したいということです。残念ながら、CSS の方法ではbackground-attachment:fixed;、ビューポートを基準にして画像を配置するだけです。これにより、背景画像とは縦横比が大幅に異なる画面サイズで問題が発生し、背景画像 (人物の写真) の不要なクリッピングが発生します。

私が現在たどり着いた解決策は、スクロール時にアニメーション化することでJavaScriptbackground-size: containをシミュレートしながら、すべての画面サイズで画像のクリッピングを防ぐために使用しています。問題は、ページの下にアニメーションを表示するボタンをクリックすると、画像の設定がぎくしゃくすることです。background-attachment: fixedbackground-position-yscrollTopbackground-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>

4

4 に答える 4

1

コメントからの回答の投稿:

background-attachment:fixed;と の両方を使用してbackground-size:contain;、 で画像をオフセットすることでトップ カットを回避できますbackground-position-y:[height of top element];。

于 2016-10-12T02:50:56.307 に答える
0

transitionプロパティをbackground-position-y .5s ease-in-outat.hero-banner要素に設定できます

// 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>

于 2016-10-12T02:18:55.917 に答える
0

上記の回答に加えて、スクロール時に要素を移動する代わりに位置固定を使用してみてください。はるかにスムーズになります。

于 2016-10-12T05:29:43.623 に答える