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>
<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>
<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>
