QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Full Screen Scrolling with Page Piling Effect

Full Screen Scrolling with Page Piling Effect

page-piling-effect

In this tutorial I will show you how to create a full screen scrolling website with piling effect on page transition. In this article I will be using a jQuery library called as pagePiling.js. With just few lines of code you can get a full screen scrolling with page piling effect.

Demo

View Demo

Including pagePiling.js and jQuery in Webpage

You can directly include pagePiling.js and jQuery from CDN.

<!doctype html>
<html>
    <head>
        <title>Full Screen Scrolling with Page Piling Effect Demo</title>

        <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.css">
    </head>
    <body>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.min.js"></script>
    </body>
</html>

Full Screen Scrolling with Page Piling Effect

Here are some points you need to remember while using the library.

  • Each section will be defined with a div containing the section class.
  • The active section by default will be the first section, which is taken as the home page.
  • Initiate pagePiling.js after webpage has loaded.

Here is the complete code. We created such kind of effect with just few lines of code

<!doctype html>
<html>
    <head>
        <title>Full Screen Scrolling with Page Piling Effect Demo</title>

        <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.css">
    </head>
    <body>
        <div id="pagepiling">
            <div class="section">Section 1</div>
            <div class="section">Section 2</div>
            <div class="section">Section 3</div>
            <div class="section">Section 4</div>
        </div>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#pagepiling').pagepiling();
            });
        </script>
    </body>
</html>
Oct 29, 2014Narayan Prusty
Creating a One Page WordPress ThemeCreating Windows Metro Style Layout for Websites
Comments: 3
  1. Cai-Shang
    4 years ago

    Thanks so much!!!
    It helps me a lot.

    ReplyCancel
  2. DK
    6 years ago

    Thanks for this tutorial! I got it working, it looks great, but I just can’t get navigation bar to be fixed and on top of each section. Is there a way to do that using this script?

    ReplyCancel
  3. Arun kumar
    8 years ago

    Finally i got it, thanks for your sharing several month i try to search this scrolling…
    Your code is very easy, thank u once again…

    Arun

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 3 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Demo
  • Including pagePiling.js and jQuery in Webpage
  • Full Screen Scrolling with Page Piling Effect
Related Articles
  • Full Screen Scrolling with Page Split Effect
  • Fade Image On Scroll Effect
  • Create a Drag and Drop Page Builder for WordPress
  • Change Navigation Style On Scroll
  • Creating Windows Metro Style Layout for Websites
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license