校正圖片上的視差效果 jQuery

Question

我有一個視差效果，我用來在這個圖片網站上工作，但我想知道為什么它會剪裁圖片以及我如何糾正上述問題。 每當我向下滾動一定長度時，它就會切斷圖片並開始下一張，但隨后又將另一張重新置於頂部。 當您到達底部圖片時，它顯示頂部在底部和底部在頂部。

jQuery 視差

<section class="home">
  <div class="pic img1 parallax"></div>
  <div class="pic img2 parallax"></div>
  <div class="pic img3 parallax"></div>
  <div class="pic img4 parallax"></div>
</section>


body {
  box-sizing: border-box;
  margin: 0;
}

section {
  width: 100%;
  height: 50em;
}

.pic {
  width: 100%;
  height: 50em;
  background-size: cover;
  background-position: center;
}

.img1 {
  background-image: url('https://images.unsplash.com/photo-1536164832230-6c238c58f740?ixlib=rb-0.3.5&s=09987436d4a89cf8c848c93aa574dfda&auto=format&fit=crop&w=1650&q=80');
}

.img2 {
  background-image: url('https://images.unsplash.com/photo-1536221236547-04007cfc3d8b?ixlib=rb-0.3.5&s=426505fd76bd618fdd95640f8870e38c&auto=format&fit=crop&w=1650&q=80');
}

.img3 {
  background-image: url('https://images.unsplash.com/photo-1536171010494-d89014448ca1?ixlib=rb-0.3.5&s=4f7b5d0b81a5f1e1445a86fd9a251a46&auto=format&fit=crop&w=1576&q=80');
}

.img4 {
  background-image: url('https://images.unsplash.com/photo-1536108978996-128e3e2a9783?ixlib=rb-0.3.5&s=31ce21b0ec2bb391c601c681fc1c7952&auto=format&fit=crop&w=1475&q=80');
}

//jQuery Parallax
$(document).ready(function() {

  $(window).scroll(function() {
    parallax();
  })

  function parallax() {

    var wScroll = $(window).scrollTop();
    //select element, class, id etc and property
    $('.pic').css('background-position', 'center ' +(wScroll)+'px')
    //you can also change speed 
  }
});

Answer 1

不是視差腳本使您的圖片被裁剪。 它們被裁剪是因為您使用的是background-size:cover ，這...

... 在保留其固有縱橫比（如果有）的同時將圖像縮放到最小尺寸，使其寬度和高度都可以完全覆蓋背景定位區域。

請參閱有關background-size屬性的官方規范。

我的回答到此結束，但我還會對您當前使用的內容添加一些注意事項，希望您會發現它有用。

---

您給.pic （和section ）的高度為50em而您正在使用的視差技術旨在創建50em面板的元素的效果，其高度等於設備的高度（ 100vw ），而您目前正在打破這一點，降低效果。 在高度高於50em設備上，您的圖像將比屏幕短，您將看到下一個頂部，而在低於50em設備上，用戶需要滾動一點才能開始顯示下一個圖像。 您可以通過將瀏覽器窗口的大小調整為全寬和正常高度的一半來測試這一點，您就會明白我在說什么。

調整此示例的大小並將其與調整您的大小進行比較：

 $(document).ready(function() { $(window).scroll(function() { parallax(); }) function parallax() { var wScroll = $(window).scrollTop(); $('.pic').css('background-position', '50% ' +(wScroll)+'px') } });

 body { box-sizing: border-box; margin: 0; } section, .pic { width: 100%; height: 100vh; } .pic { background-size: cover; } .img1 { background-image: url('https://images.unsplash.com/photo-1536164832230-6c238c58f740?ixlib=rb-0.3.5&s=09987436d4a89cf8c848c93aa574dfda&auto=format&fit=crop&w=1650&q=80'); } .img2 { background-image: url('https://images.unsplash.com/photo-1536221236547-04007cfc3d8b?ixlib=rb-0.3.5&s=426505fd76bd618fdd95640f8870e38c&auto=format&fit=crop&w=1650&q=80'); } .img3 { background-image: url('https://images.unsplash.com/photo-1536171010494-d89014448ca1?ixlib=rb-0.3.5&s=4f7b5d0b81a5f1e1445a86fd9a251a46&auto=format&fit=crop&w=1576&q=80'); } .img4 { background-image: url('https://images.unsplash.com/photo-1536108978996-128e3e2a9783?ixlib=rb-0.3.5&s=31ce21b0ec2bb391c601c681fc1c7952&auto=format&fit=crop&w=1475&q=80'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="home"> <div class="pic img1 parallax"></div> <div class="pic img2 parallax"></div> <div class="pic img3 parallax"></div> <div class="pic img4 parallax"></div> </section>

---

但您能做出的最大改進可能是完全拋棄 JavaScript。 綁定在scroll事件上的視差方法很昂貴（它們在沒有良好計算能力的設備上無法順利運行）並且它們在大多數觸摸設備上只是失敗，出於性能原因，在滾動期間阻止 JavaScript 執行。

使用簡單的 CSS 可以實現完全相同的效果，即

background-attachment:fixed

...無需在滾動上綁定偵聽器以更改background-position 。 它幾乎適用於任何設備，無論計算能力如何，也適用於觸摸設備：

 body { box-sizing: border-box; margin: 0; } section, .pic { width: 100%; height: 100vh; } .pic { background-size: cover; background-attachment: fixed; background-position: 50% 50%; } .img1 { background-image: url('https://images.unsplash.com/photo-1536164832230-6c238c58f740?ixlib=rb-0.3.5&s=09987436d4a89cf8c848c93aa574dfda&auto=format&fit=crop&w=1650&q=80'); } .img2 { background-image: url('https://images.unsplash.com/photo-1536221236547-04007cfc3d8b?ixlib=rb-0.3.5&s=426505fd76bd618fdd95640f8870e38c&auto=format&fit=crop&w=1650&q=80'); } .img3 { background-image: url('https://images.unsplash.com/photo-1536171010494-d89014448ca1?ixlib=rb-0.3.5&s=4f7b5d0b81a5f1e1445a86fd9a251a46&auto=format&fit=crop&w=1576&q=80'); } .img4 { background-image: url('https://images.unsplash.com/photo-1536108978996-128e3e2a9783?ixlib=rb-0.3.5&s=31ce21b0ec2bb391c601c681fc1c7952&auto=format&fit=crop&w=1475&q=80'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="home"> <div class="pic img1 parallax"></div> <div class="pic img2 parallax"></div> <div class="pic img3 parallax"></div> <div class="pic img4 parallax"></div> </section>