你如何制作一个滚动页面？

Question

如何制作单页滚动网站，如this。 我尝试使用here中的“peachananr”插件，但它没有工作，反而搞砸了我的布局。 例如：

<div class="main">
<section id = "mainPage" class="container mainPage" >
</section>

<section id = "projectContents" class = " projectContents" >
<span style = "display: block; float: left; margin-top: 50px; font-size:40px; font-family: 'Alegreya Sans SC', sans-serif;">
 Projects:
</span>
</section>
</div>

我的整个页面聚集在一起o.O！ （所有部分合二为一）我的页面基本上是一个单页网站，如this

这是我对每个部分页面的布局方式的css：

body, html {
  height: 100%;
  margin: 0;
}

* {
    box-sizing: border-box;
    /* look this up */
}

.container {
    width: 100%;
    text-align: center;
    height: 100%;
}


.mainPage {
height:100%;
width:100%;

background: url(Imgs/13.jpg);
background-repeat: no-repeat;
background-position: center center;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

.projectContents {
position: relative;
height:100%;
width:100%;
background: white;

}

这是我的Html：

<section id = "mainPage" class="container mainPage" >
</section>

<section id = "projectContents" class = " projectContents" >
<span style = "display: block; float: left; margin-top: 50px; font-size:40px; font-family: 'Alegreya Sans SC', sans-serif;">
 Projects:
</span>
</section>

请问如何解决此问题，或者请您解决。例子将非常感谢!! ：D谢谢alottt！

ps我在我的js文件中调用插件，如$（“。main”）。onepage_scroll（）;

Answer 1

确保您正在加载onepage-scroll css和javascript ...没有任何CSS，它可以正常工作。从那里开始的风格。

<强> HTML

<div class="main">
<section id = "mainPage" class="container mainPage" >
</section>

<section id = "projectContents" class = " projectContents" >
<span style = "display: block; float: left; margin-top: 50px; font-size:40px; font-family: 'Alegreya Sans SC', sans-serif;">
 Projects:
</span>
</section>
</div>

JS

$('.main').onepage_scroll()  

<强> DEMO

Answer 2

绑定鼠标滚动，然后创建幻灯片。

<div class="b-slider">
   <div class="b-sider__item">
      Item 1
   </div>
   <div class="b-sider__item">
      Item 2
   </div>
   <div class="b-sider__item">
      Item 3
   </div>
   <div class="b-sider__item">
      Item 4
   </div>
   <div class="b-sider__item">
      Item 5
   </div>
</div>

使用带有垂直滚动选项的jcarousel滑块插件

$('.b-slider').jcarousel('next');

Answer 3

我实际上没有滚动页面的背景，但我发现this site可能对您的代码有帮助。

  

结构非常简单，为网站的每个部分添加section类，为部分中的每张幻灯片添加slide：

<div id="fullpage">
     <div class="section">WHATEVER</div>
     <div class="section">WHATEVER</div>
     <div class="section">
          <div class="slide">Slide 1</div>
          <div class="slide">Slide 2</div>
          <div class="slide">Slide</div>
          <div class="slide">Slide 4</div>
     </div>
     <div class="section">WHATEVER</div>
</div>

  

使用默认选项初始化插件，就像这样简单：

$(document).ready(function() {
    $('#fullpage').fullpage();
});

以下是一个示例：http://alvarotrigo.com/fullPage