QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Home 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
    1 year 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
    1 year ago

    Cool Effect! great tutorial!

    ReplyCancel
  3. Rui Sousa
    2 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
      1 year 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 to Logo 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`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image3 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
Freelance: I am available
@narayanprusty
Hi, I am a developer, speaker, writer and consultant - focusing on HTML5, JavaScript, WordPress, Blockchain and Cordova. You can outsource your website or mobile app development to me.





Will get back to you soon!!!
HTML5
CSS3
JS
PHP
WordPress
MySQL
Intel XDK
AngularJS
NodeJS
Let's get started
My Books


2014 - 2015 © QNimate
All tutorials MIT license