Some instructions on how to use fullpage.js to scroll between sections in your web page.
I am not a web developer, so this post will contain a minimum of javascripting, css styling and so on. I just wanted to see how fullpage.js can be incorporated so that individual web pages can be scrolled horizontally in an animated way.
Step 1: Download fullpage.js
Fullpage.js javascript can be downloaded from here:
https://alvarotrigo.com/fullPage/
This will download a file called fullPage.js-master.zip.
Once the zip file has been downloaded, extract it somewhere.
Step 2: Create folder structures for your web page(s)
I have created a folder called ‘FullPage’ containing the subfolders ‘html’ and ‘resources’ in which the HTML file(s) and style sheets/javascripts will be contained respectively:
Step 3: Install the necessary styling and resources.
In the ‘resources’ folder create a further two subfolders ‘css’ and ‘javascript’ in which to contain our styling and scripting files:
In the fullPage.js-master.zip that was extracted, obtain the files jquery.fullPage.min.js and jqujquery.js files and copy them into the ‘javascript’ folder:
Also obtain the ‘jquery.fullPage.css’ file and copy it into the ‘css’ folder:
Step 4: Create an example web page.
In the ‘html’ folder create a new html file ‘Page.html’
Edit the html page. Some things to note: styling applied to the scrolling arrow, the main html body which consists of sub-sections containing the individual slides we wish to scroll through, and the references to the fullpage javascripts that we downloaded and copied:
Page.html
<!DOCTYPE html>
<html>
<head>
<title>Example page</title>
<meta charset="utf-8">
<link href="../resources/css/jquery.fullPage.css" rel="stylesheet prefetch"></link>
<style>
h1{
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
font-face: verdana;
color: blue;
}
.fp-controlArrow {
position: absolute;
z-index: 4;
top: 50%;
cursor: pointer;
width: 0;
height: 0;
border-style: solid;
margin-top: -38px;
}
.fp-controlArrow.fp-prev {
left: 15px;
width: 0;
border-width: 38.5px 34px 38.5px 0;
border-color: transparent red transparent transparent;
}
.fp-controlArrow.fp-next {
right: 15px;
border-width: 38.5px 0 38.5px 34px;
border-color: transparent transparent transparent red;
}
</style>
</head>
<body class="lang-en tab-pips">
<article id="main">
<div class="section">
<div id="slide1" class="slide-wrapper current">
<h1 class="sansserif" align="center">Slide 1</h1>
</div>
<div id="slide2" class="slide-wrapper">
<h1 align="center">Slide 2</h2>
</div>
<div id="slide2" class="slide-wrapper">
<h1 align="center">Slide 3</h2>
</div>
</article>
<script src='../resources/javascript/jquery.js'></script>
<script src='../resources/javascript/jquery.fullPage.min.js'></script>
<script>
// variables
var $header_top = $('.header-top');
var $nav = $('nav');
// fullpage customization
$('#main').fullpage({
menu: '#menu',
slideSelector: '.slide-wrapper',
sectionsColor: ['#00b3d7', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff', '#ccc'],
continuousHorizontal: true,
continuousHorizontalKey: 'YWx2YXJvdHJpZ28uY29tX00zVVkyOXVkR2x1ZFc5MWMwaHZjbWw2YjI1MFlXdz12Nk0=',
slidesNavigation: true,
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
console.log("slideLoad--" + "anchorLink: " + anchorLink + " index: " + index + " slideAnchor: " + slideAnchor + " slideIndex: " + slideIndex);
},
onSlideLeave: function(anchorLink, index, slideIndex, direction){
console.log("----------------");
console.log("onSlideLeave--" + "anchorLink: " + anchorLink + " index: " + index + " slideIndex: " + slideIndex + " direction: " + direction);
}
});
</script>
</body>
</html>
Step 5: Try it!
I then view the Page.html in Internet Explorer. Notice that the styling/scripting provides us with the left/right control arrows that provide the scrolling animation when navigation through each slide and pips to achieve the same scrolling action:
And on to the next slide: