Building a fullpage website

How to use the fullPage.js JavaScript framework

Download fullPage.js from here

http://alvarotrigo.com/fullPage/

fullpage.js

VIEW DEMO

What to do with your downloaded files?

Now that you have downloaded and unzipped the files from the fullPage.js download page, what do you do now?

Look inside the folder named "dist". I have highlighted it in the image below

fullpage.js

Inside the folder named "dist" you will find the files you need to make this thing work on your website.

In the image below I have highlighted the two basic files you will need to get fullPage.js working. Copy these two files to your website directory.

fullpage.js

You should now have a folder with these three files in it.

NOTE: In the example below I have a file named index.php - but it's okay if you have index.html.

fullpage.js

Let's start coding our page

We need to include the files we downloaded into our webpage and we need to include the jQuery Library.

Copy and paste the code below into the <head> section of your web page.

<link href="jquery.fullpage.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fullpage.js"></script></body>
</html>

Now we need some content on our webpage.

Let's start by adding some sections with a bit of content in each section.

<div id="fullpage">
<div class="section">Some Content 01</div>
<div class="section">Some Content 02</div>
<div class="section">Some Content 03</div>
<div class="section">Some Content 04</div>
</div>

If you try to view your page at this point you will see nothing has happened.

To make this work we need to add one last piece.

Copy and paste the code below into the <body> of your html to call-up the fullPage JavaScript code. In the code below you will see that each section's color can be controlled. Just add a new color for each section you create.

<script>$(document).ready(function() {
$('#fullpage').fullpage(
{sectionsColor:['#1bbc9b', '#4bbfc3', '#7baabe', 'whitesmoke'],}
);
});</script>

We can also add a slideshow to a section like this...

<div id="fullpage">
<div class="section">Some Content 01</div>
<div class="section">Some Content 02</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>

</div>
<div class="section">Some Content 04</div>
</div>

One last thing: Just add a quick css style to center your text within each section like this....
.section {
text-align:center
}

VIEW DEMO