vPageScroll.js

About the plugin

vPageScroll.js is a simple jQuery plugin that initializes a responsive one page layout. Perfect for your nex one page design

It has two main functionalities. At first it resizes your container to the width and height of your browser and centers your content, second it creates a navigation to scroll through your page.

About the author

My name is Nico Martin and I'm an independent web developer from Switzerland. Feel free to contact me or have a Look at my other Projects.

Installation

1. Download or clone the vPageScroll directory from GitHub. Unpack it into an appropriate directory on your web sever.

2. Now include the css-files into your head-section:

<head>
    <!-- responsive grid system -->
    <link href="vpagescroll/src/css/jquery.vpagescroll.grid.css" rel="stylesheet" type="text/css" media="screen" />
    <!-- some custom styles for the Demo - can be customized -->
    <link href="vpagescroll/src/css/jquery.vpagescroll.styles.css" rel="stylesheet" type="text/css" media="screen" />
    <!-- important for the functionality -->
    <link href="vpagescroll/src/css/jquery.vpagescroll.css" rel="stylesheet" type="text/css" media="screen" />
    <!-- font-awesome Icons -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>

3. Next, simply include the JS-files at the end of your footer right before the end of the body:


  <!-- js -->
  <script type="text/javascript" src="vpagescroll/src/js/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="vpagescroll/src/js/jquery.vpagescroll.js"></script>
  <script type="text/javascript">
  /* initialize */
  </script>
</body>

Setup

Basic html

<div id="navigation"></div>
<div id="main">
  <section><div class="container-12">
    <div class="inner">
      <div class="grid-12">...</div>
    </div>
  </div></section>
</div>

Basic JS

include the following right before the end of the body and after the JS-files

<script type="text/javascript">
  $(document).ready(function(){
    $(".main").vpagescroll();
  });
</script>

Advanced html

<div id="navigation"></div>
<div id="main">
  <section data-title="Title 1" data-icon="fa-gavel" data-color="#16a085"><div class="container-12">
    <div class="inner">
      <div class="grid-12">...</div>
    </div>
  </div></section>
</div>

data-title: Title shown in the navigation
data-icon: Icon for the navigation - FontAwesome
data-color: Container Background-color

Advanced JS

include the following right before the end of the body and after the JS-files

<script type="text/javascript">
  $(document).ready(function(){
    $(".main").vpagescroll({
      sectionContainer: "section",      //the container
      sectionInner    : ".inner",       //the inner container
      navigation      : "#navigation"   //the navigation container
    });
  });
</script>

Grid System

vPageScroll.js comes with a responsive grid system:

<div class="inner">
  <div class="grid-6"></div>
  <div class="grid-6"></div>
</div>

grid 12

grid 1

grid 11

grid 2

grid 10

grid 3

grid 9

grid 4

grid 8

grid 5

grid 7

grid 6

Licence

vPageScroll.js is provided under the terms of the GNU General Public License. That means this plugin is entirely free to use.

If you found a bug or if you have some improvements, feel free to contact me.