如何实现上滚动

Question

不同的背景，我想复制的效果如下图所示 -

https://allods.my.com/en/news （没有这一项，抱歉）

http://bit.do/b2692

https://www.google.co.in/sheets/about

忽略所有动画，我想知道如何在页面滚动时实现多种不同的背景。

PS。我是一个完整的初学者，我更喜欢只有HTML/CSS解决方案。

Answer 1

你应该尝试添加位置固定属性到你的背景，它应该有所帮助。

body, 
 
html, 
 
main { 
 
    /* important */ 
 
    height: 100%; 
 
} 
 
.fixed-bg { 
 
    min-height: 100%; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 
.fixed-bg.bg-1 { 
 
    background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg"); 
 
} 
 
.fixed-bg.bg-2 { 
 
    background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg"); 
 
} 
 
.fixed-bg.bg-3 { 
 
    background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg"); 
 
} 
 
.fixed-bg.bg-4 { 
 
    background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg"); 
 
} 
 
.scrolling-bg { 
 
    min-height: 100%; 
 
}

<main> 
 
    <div class="fixed-bg bg-1"> 
 
    <h1><!-- title goes here--></h1> 
 
    </div> 
 

 
    <div class="scrolling-bg cd-color-2"> 
 
    <div class="container"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi... 
 
     </p> 
 
    </div> 
 
    </div> 
 
    <div class="fixed-bg bg-2"> 
 
    <h1><!-- title goes here --></h1> 
 
    </div> 
 

 
    <div class="scrolling-bg color-2"> 
 
    <div class="container"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi... 
 
     </p> 
 
    </div> 
 
    </div> 
 
    <div class="fixed-bg bg-3"> 
 
    <h1><!-- title goes here --></h1> 
 
    </div> 
 

 
    <div class="scrolling-bg color-2"> 
 
    <div class="container"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi... 
 
     </p> 
 
    </div> 
 
    </div> 
 
    <div class="fixed-bg bg-4"> 
 
    <h1><!-- title goes here --></h1> 
 
    </div> 
 

 
    <div class="scrolling-bg color-2"> 
 
    <div class="container"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi... 
 
     </p> 
 
    </div> 
 
    </div> 
 
</main>

事业部后格的方法：

body, 
 
html, 
 
main { 
 
    /* important */ 
 
    height: 100%; 
 
    padding:0; 
 
    margin:0; 
 
} 
 
.container{ 
 
position:absolute; 
 

 
} 
 

 
.fixed-bg { 
 
    min-height: 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    
 
} 
 
.fixed-bg.bg-1 { 
 
    background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg"); 
 

 
    
 
} 
 
.fixed-bg.bg-2 { 
 
    background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg"); 
 
    
 
    
 
} 
 
.fixed-bg.bg-3 { 
 
    background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg"); 
 
} 
 
.fixed-bg.bg-4 { 
 
    background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg"); 
 
} 
 
.scrolling-bg { 
 
    min-height: 100%; 
 
    
 
}

<main> 
 
    <div class="fixed-bg bg-1"> 
 
    <div class="container"><!-- content goes here--></div> 
 
    </div> 
 
    
 
    <div class="fixed-bg bg-2"> 
 
    <div class="container"><!-- content goes here--></div> 
 
    </div> 
 

 
    
 
    <div class="fixed-bg bg-3"> 
 
    <div class="container"><!-- content goes here--></div> 
 
    </div> 
 

 
    
 
    <div class="fixed-bg bg-4"> 
 
    <div class="container"><!-- content goes here--></div> 
 
    </div> 
 

 
    
 
</main>

Answer 2

所以，你正在寻找一个视差效果，有一些插件是的。我最近使用http://pixelcog.github.io/parallax.js/，这对我来说效果很好。

使用它非常简单。你说你想要一个HTML/CSS的解决方案，但我不认为你可以做到没有JavaScript。如果别人知道没有javascript的替代方案，我也想看看它。但即使您对JavaScript不了解，也可以使用此插件，只需按照我提供的链接上的说明操作即可。

该插件需要jquery才能使用！