QNimate

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

Full Screen Scrolling with Page Split Effect

full-screen-split-effect

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

Including multiscroll.js and jQuery in Webpage

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

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

        <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/alvarotrigo/multiscroll.js/master/jquery.multiscroll.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/multiscroll.js/master/vendors/jquery.easings.min.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/multiscroll.js/master/jquery.multiscroll.min.js"></script>
    </body>
</html>

Full Screen Scrolling with Page Split Effect

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

  • Each section(a section is a left or right part of page) 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 multiscroll.js after webpage has loaded.

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

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

        <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/alvarotrigo/multiscroll.js/master/jquery.multiscroll.css">
    </head>
    <body>
        <div id="multiscroll">
            <div class="ms-left">
                <div class="ms-section">Left 1</div>
                <div class="ms-section">Left 2</div>
                <div class="ms-section">Left 3</div>
            </div>
            <div class="ms-right">
                <div class="ms-section">Right 1</div>
                <div class="ms-section">Right 2</div>
                <div class="ms-section">Right 3</div>
            </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/multiscroll.js/master/vendors/jquery.easings.min.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/multiscroll.js/master/jquery.multiscroll.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#multiscroll').multiscroll({navigation: true, navigationPosition: 'right', navigationColor: '#000'});
            });
        </script>
    </body>
</html>
Nov 3, 2014Narayan Prusty
Disable Text Selection in PhonegapSome Websites Not Opening In BSNL Broadband Solution
Comments: 4
  1. Anna Maganini
    6 years ago

    Hi,
    I am looking to get some kind of Wordpress website with a split scrolling effect, but in the examples I see online, both screens move in opposite directions whether you want them to or not. What I want is a split screen where one side stays stationary, and the other half scrolls down.
    What do I have to get to create that effect? See website above for effect I want. www.solomonshiv.com
    Thanks much.
    Anna

    ReplyCancel
  2. Logo
    6 years ago

    Cool Effect! great tutorial!

    ReplyCancel
  3. Rui Sousa
    7 years ago

    Hi Narayan!

    I was wondering if there is any way to disable split scrolling on some sections?
    I’m trying to create a top full width page, which will have a background video running, and start spliting the screen from the second page on.

    Thanks!

    ReplyCancel
    • Muhammad Mustufa
      6 years ago

      Hey rui

      May be you should try this http://www.alvarotrigo.com/fullPage/ this is single page scrolling effects and tons of customization you can apply on its. its simple to apply and very easy to handle.

      Thanks!!

      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 5 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Including multiscroll.js and jQuery in Webpage
  • Full Screen Scrolling with Page Split Effect
Related Articles
  • Full Screen Scrolling with Page Piling Effect
  • Fade Image On Scroll Effect
  • Change Navigation Style On Scroll
  • Facebook Style Infinite Scroll
  • Customizing Right Click Menu in HTML Page
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license