修正图片视差效果 jQuery

Question

我使用视差效果来处理这个图片站点，但我想知道为什么它会剪裁图片以及如何纠正上述问题。每当我向下滚动一定长度时，它就会剪掉图片并开始下一张，但随后又会把另一张放回顶部。当你到达底部图片时，它显示顶部在底部和底部在顶部。

<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，其中...

... scales the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

参见 background-size 属性上的 official specification。

我的回答到此结束，但我还会针对您当前使用的内容添加一些注意事项，希望您会发现它有用。

您给 .pic（和 section）一个 50em 的高度，而您使用的视差技术旨在产生 的效果panel-like 元素的高度等于设备的高度 (100vw)，而您目前正在破坏它，从而降低了效果。在高度高于 50em 的设备上，您的图像将比屏幕短，您会看到下一个的顶部，而在高度低于 50em 的设备上，用户需要在下一个之前滚动一点图像将开始揭幕。您可以通过将浏览器 window 调整为全宽和正常高度的一半来测试这一点，您就会明白我在说什么。

调整此示例的大小并将其与调整您的示例进行比较：

$(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>

修正图片视差效果 jQuery

Correcting picture on parallax effect jQuery

jquery

html

css

scroll

parallax