CSS视差问题

Question

我的视差代码有些问题。我试图在滚动时获得无缝的外观，但问题是我似乎不能想出如何定位背景，使它们不会只是分开并重复相同的图像。我几乎尝试了我能想到的所有方法来解决这个问题，但似乎找不到中间立场。任何建议都是令人惊叹的。

​

(function(){

  var parallax = document.querySelectorAll(".parallax"),
      speed = 0.5;

  window.onscroll = function(){
    [].slice.call(parallax).forEach(function(el,i){

      var windowYOffset = window.pageYOffset,
          elBackgrounPos = "0 " + (windowYOffset * speed) + "px";
      
      el.style.backgroundPosition = elBackgrounPos;

    });
  };

})();

.empty_canvas_content {
box-shadow:none !important;
}
section.module:last-child {
  margin-bottom: 0;
}
section.module h2 {
  margin-bottom: 40px;
  font-family: 'proxima_nova_rgregular', sans-serif;
  font-size: 30px;
}
section.module p {
  margin-bottom: 40px;
  font-size: 12px;
  font-weight: 300;
}
section.module p:last-child {
  margin-bottom: 0;
}
section.module.content {
	margin: 0 auto;
	background-color:#fff;
	font-family: 'proxima_nova_rgregular', sans-serif;
	color: #000;
	font-size:12px;
	letter-spacing:0px;
}
section.module.parallax {
  padding: 240px 0;
  background-position: 0 0;
}
section.module.parallax h1 {
  color: #1e1e1e;
  font-size: 48px;
  font-family: 'proxima_nova_rgregular', sans-serif;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

/* These are the mobile images, push graphic to the left */
section.module.parallax-1 {
  background-image: url("http://s3.postimg.org/3oyk0ti1v/untitled4.jpg");
  background-repeat:repeat-y;
  background-size:cover;
  background-position:left;
}
section.module.parallax-2 {
  background-image: url("http://s15.postimg.org/keyjegc6z/story2_mobile.jpg");
  background-repeat:repeat-y;
  background-size:cover;
  background-position:left;
}
section.module.parallax-3 {
  background-image: url("http://s3.postimg.org/5v3hkow6r/pattern3.png");
  background-repeat:repeat-y;
  background-size:cover;
  background-position:left;
}

@media all and (min-width: 600px) {
  section.module h2 {
    font-size: 42px;
  }
  section.module p {
    font-size: 20px;
  }
  section.module.parallax {
    padding: 300px 0;
  }
  
  section.module.parallax-1 {
	background-image: url("http://s10.postimg.org/5p42tdi09/Untitled_3_copy.jpg");
  }
  section.module.parallax-2 {
	background-image: url("http://s15.postimg.org/9e3e9fjy3/story2_desktop.jpg");
  }
  section.module.parallax-3 {
	background-image: url("http://s10.postimg.org/5p42tdi09/Untitled_3_copy.jpg");
  }
  
  section.module.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.module.parallax h1 {
    font-size: 160px;
  }
  section.module.parallax-1 {
	background-image: url("http://s10.postimg.org/5p42tdi09/Untitled_3_copy.jpg");
  }
  section.module.parallax-2 {
	background-image: url("http://s15.postimg.org/9e3e9fjy3/story2_desktop.jpg");
  }
  section.module.parallax-3 {
	background-image: url("http://s10.postimg.org/5p42tdi09/Untitled_3_copy.jpg");
  }
  
}

<div class="deleteme" style="max-width:1140px; margin: 0 auto;">
<p><section class="module parallax parallax-1">
<div class="holditin">
<center><img src="http://s22.postimg.org/k71wcjnm9/logo.png" width="90%"></center>
</div>
</section>
<section class="module content">
<div class="holditin">
<h2><center>Venture in Style Dream Road Trip Giveaway!</center></h2>
<center><p>Have you ever dreamed of going on the road trip of a lifetime? Maybe it's renting an RV and exploring Route 66? Or driving through the mountains on the Blue Ridge Parkway? Whatever it is, we want to hear about it.</p></center>
</div>
</section>        <section class="module parallax parallax-2">
<div class="holditin">
<h1>Shape</h1>
</div>
</section>        <section class="module content">
<div class="holditin">
<h2><center>We're awarding one lucky winner $5,000 to take it!</center></h2>
<center><p>Tell us in a video that is between 30 seconds and 2 minutes long what your dream road trip is! Upload it below or post it to your Instagram page using <strong>#ventureinstyle</strong> to be entered for a chance to win.</p></center>
</div>
</section>        <section class="module parallax parallax-3">
<div class="holditin">
<h1>Colour</h1>
</div>
</section>        <section class="module content">
<div class="holditin">
<h2><center><font style="letter-spacing:2px;">BE CREATIVE!</font></center></h2>
<center><p>Entries will be judged on creativity and lenght, so make sure your video stands out and meets the required length (:30-2:00).</p></center>
</div>
</section>
</div>

​

谢谢!

Answer 1

这是视差效果的一个非常常见的方面。由于图像的位置在每次滚动时都会发生变化，因此图像会在某一时刻剪切。他们有一些解决方案和一些需要承认的关键想法：

1. Using repeated -通过使用重复背景，您可以避免剪切背景。只需使用重复的图像，看起来就像图像上没有边缘一样。这个想法被广泛用于视差背景，因为它提供了无缝的背景图像大小-这也是一个视差背景的修复，你所要做的就是增加背景的大小。我们主要使用background-size:cover;，但为了覆盖视差区域，您可以使用background-size:150% auto;来处理纵向(宽度<高度)类型的图像，或者使用background-size: auto 150%;来处理横向(宽度>高度)类型的图像。百分比必须大于100%，才能覆盖所有屏幕上的整个视差区域。

第二点根据图像的大小/分辨率/屏幕大小而不同。

谢谢。