如何制作单卷页？

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>

我的整个页面都拼凑在一起了！(所有部分都集中在一起)我的页面基本上是一个像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谢谢！

ps我在我的js文件中调用插件，比如$(".main").onepage_scroll()；

​

​

Answer 1

确保你正在加载页面滚动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()  

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，它可能会在代码中对您有所帮助。

<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