视差图像太多

Question

我正在制作一个静态网站，其中有太多视差图像。基本上每个部分都由视差图像分隔。现在我面临的问题是，当我正在构建我的网站并添加部分和更多视差图像时，网站底部附近的一些图像正在移出框架。我的意思是，图像可能从错误的位置开始，然后当我滚动时，它们最终移出了 div 或框架，我看到图像下面是空的 space .

但并非所有图像都会发生这种情况；只有网站底部附近的图像会遇到此问题。而且，图像越低，这个问题就越明显。

这是我插入视差图像的代码：

<div class="section parallax light-translucent-bg parallax-bg-5">
  <div class="container">
    <div class="call-to-action">
    </div>
  </div>
</div>

这是 CSS 这个 div:

.parallax-bg-5 {
  background: url("../images/parallax-bg-5.jpg") 50% 0px no-repeat;
}

Answer 1

使用background-attachment: fixed

例子

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
h1,
h2 {
    color: #fff;
    text-align: center;
    padding: 25px 0;
    margin: 0;
}
.block-parallax {
    overflow: hidden;
    position: relative;
}
.block-parallax .parallax-bg {
    background-attachment: fixed;   
    background-position: 0px 0px;
    background-repeat: repeat;
    height: 100%;
    position: absolute;
    width: 100%;
    min-width: 1170px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
.block-parallax .md-box {
    padding: 200px 0 200px;
    background: rgba(0, 0, 0, 0.75);
    position: relative;
    height: 100%;
    text-align: center;
}
.block-parallax-1 .parallax-bg {    
    background-image: url('http://healthfitnessrevolution.com/wp-content/uploads/2013/10/Olympic_Boxing-featured-image.jpg');
}
.block-parallax-2 .parallax-bg {
    background-image: url('http://www.seankernan.com/data/photos/201_1kampala_boxing_3273.jpg');
}
.block-parallax-3 .parallax-bg {
    background-image: url('http://www.omaa.org.uk/sites/default/files/Boxing-008.jpg');
}
.block-parallax-4 .parallax-bg {
    background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSw56f8j5e70Gl8gZtH4Qgmq9wTo-aG3u3ZTgx6Uhs1M8ljMoU0Sg');
}
.block-parallax-5 .parallax-bg {
    background-image: url('http://www.hdwallpaperscool.com/wp-content/uploads/2014/08/boxing-hd-wallpapers-of-high-resolution-free.jpg');
}
.block-parallax-6 .parallax-bg {
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS65xrl17ug548Rzu04Ahb6oeMAVkg2mGtyNY2t4TllnaMqfCKA');
}
.block-parallax-7 .parallax-bg {
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSC8mBv8rOCIQ8pg7eaj3-6croM0P75HnbwVJgarkOTpFwSj9U6');
}
.block-parallax-8 .parallax-bg {
    background-image: url('http://thumbnails.cbsig.net/CBS_Production_Showtime/CBS_Production_Showtime/2009/09/25/Sports/Boxing/193/694/boxing_supersix_farhood_cbsan.jpg');
}
.block-parallax-9 .parallax-bg {
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR2XSMnKMHMD5Rn8LvbfD6hGWGLlIrWwczW433sMgfpuSh3iU1Agw');
}
.block-parallax-10 .parallax-bg {
    background-image: url('http://www.mymmainfo.com/wp-content/uploads/2011/12/pay-per-view-boxing.jpg');
}

<section class="block-parallax block-parallax-1">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h1>background 1</h1>
    </div>
</section>
<section class="block-parallax  block-parallax-2">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 2</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-3">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 3</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-4">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 4</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-5">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 5</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-6">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 6</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-7">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 7</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-8">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 8</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-9">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 9</h2>
    </div>
</section>
<section class="block-parallax  block-parallax-10">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h2>background 10</h2>
    </div>
</section>

fiddle

Answer 2

所以我通过使图像重复来解决了这个问题。正如我在评论中提到的，我刚刚发现了问题的症结所在。一旦您开始从最顶部滚动网站，每个图像就会开始移动。这意味着当您到达网站底部时，那里的图像已经移动太多并且超出了 div.

例如，我改变了

.parallax-bg-4 {
  background: url("../images/parallax-bg-4.jpg") 50% 0px no-repeat;
}

到

.parallax-bg-4 {
  background: url("../images/parallax-bg-4.jpg") 50% 0px;
}

并对每个 div 或具有视差的图像重复执行此操作。

我有点担心性能，当我重复图像时确实注意到我的笔记本电脑变热，而且我有一台非常强大的机器（rMBP 15"）。如果有人有更好的解决方案，请 post 在这里

视差图像太多

Too many parallax images

javascript

jquery

html

css

parallax