jQuery Plugin For Creating Responsive One Page Scrolling Web Layout - vPageScroll.js

File Size: 142 KB
Views Total: 7139
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Creating Responsive One Page Scrolling Web Layout - vPageScroll.js

vPageScroll.js is an easy yet robust jQuery plugin to create a responsive grid layout for one page scrolling website. The plugin comes with a fully responsive side or top navigation bar which allows the visitor to smoothly scroll through different sections of your webpage. vPageScroll.js is provided under the terms of theGNU General Public License.

How to use it:

1. Include the required CSS files in the head of the document.

<link href="src/css/jquery.vpagescroll.grid.css" rel="stylesheet">
<link href="src/css/jquery.vpagescroll.styles.css" rel="stylesheet">
<link href="src/css/jquery.vpagescroll.css" rel="stylesheet">

2. Include the Font Awesome 4 for the navigation icons.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

3. Include jQuery library and the jQuery vPageScroll.js script at the bottom of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/js/jquery.vpagescroll.js"></script>

4. Include jQuery library and the jQuery vPageScroll.js script at the bottom of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/js/jquery.vpagescroll.js"></script>

5. Create an empty container to place the navigation.

<div id="navigation"></div>

6. Create sections for your one page scrolling website. Use data-* attributes to customize each section individually.

<div class="main">

  <section data-title="Home" data-icon="fa-home" data-color="#1abc9c">
    <div class="container-12">
      <div class="inner">
        <div class="grid-6">Content 1.1</div>
        <div class="grid-6">Content 1.2</div>
      </div>
    </div>
  </section>

  <section data-title="Section 2" data-icon="fa-home" data-color="#2ecc71">
    <div class="container-12">
      <div class="inner">
        <div class="grid-2">Content 2.1</div>
        <div class="grid-10">Content 2.2</div>
      </div>
    </div>
  </section>

  <section data-title="Section 3" data-icon="fa-home" data-color="#3498db">
    <div class="container-12">
      <div class="inner">
        <div class="grid-3">Content 3.1</div>
        <div class="grid-9">Content 3.2</div>
      </div>
    </div>
  </section>

</div>

7. Call the plugin with default options..

$(document).ready(function(){
$(".main").vpagescroll({

// the container
sectionContainer: "section",   

// the inner container
sectionInner    : ".inner",

// the navigation container
navigation      : "#navigation"

});
});

Change log:

2014-12-16


This awesome jQuery plugin is developed by nico-martin. For more Advanced Usages, please check the demo page or visit the official website.