A horizontal scroll of a full page is a jQuery plugin that converts an individual page into a group of scrollable horizontal segments with a console, mouse scroller, and thumbnails navigation. It is totally touch-enabled and fully responsive attribute plugin that enables the user to switch their informative blocks horizontally. This one-page scroll website with a custom made animations and transitions effects. The best feature of this animation is to operate with touch sensible modes, not only with the mouse, keyboards, etc. as well as user-friendly and mobile familiar.
Table of Contents
Features:
- Not only vertical scrolling but also horizontal scrolling.
- Easy to use. Configurable and customizable.
- Working in modern and old browsers too!
- Responsive designed to fit to different screen sizes as well as tablet and mobile devices.
- Auto scrolling on page load
- Supports mousewheel scrolling
- Image/video lazy load.
- Also can be used as a vanilla JavaScript plugin.
- React & Angular wrappers.
How to use it :
Include the latest version of jQuery library
<script src="jquery-latest.min.js"></script>
Include an fullPage.js plugin’s files on the web page.
<link rel="stylesheet" type="text/css" href='scroll-h/fullpage.min.css'>
<link rel="stylesheet" type="text/css" href="scroll-h/examples.css">
<script type="text/javascript" src="scroll-h/jquery.js"></script>
<script type="text/javascript" src="scroll-h/fullpage.scrollHorizontally.min.js"></script>
<script type="text/javascript" src="scroll-h/fullpage.extensions.min.js"></script>
Create the html for your one page website.
<div id="myContainer">
<div class="section active" id="section0">
<h1>Section 1</h1>
</div>
<div class="section" id="section1">
<div class="slide" id="slide1">
<div class="intro">
<h1>Slide 2.1</h1>
</div>
</div>
<div class="slide" id="slide2">
<div class="intro">
<h1>Slide 2.2</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</p>
<p>You can apply the same logic to horizontal slides</p>
</div>
</div>
<div class="slide" id="slide3">
<h1>Slide 2.3</h1>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Section 3</h1>
</div>
</div>
</div>
Call the plugin to enable the one page scrolling effect.
<script type="text/javascript">
jQuery(function($) {
$('#myContainer').fullpage({
sectionsColor: ['#ff73a1', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff', '#ccc'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage'],
menu: '#menu',
slidesNavigation: true,
scrollHorizontally: true,
//scrollHorizontallyKey: 'YWx2YXJvdHJpZ28uY29tX01mU2MyTnliMnhzU0c5eWFYcHZiblJoYkd4NVNRcg==',
afterSlideLoad: function(section, origin, destination, direction){
console.log({
section: section,
origin: origin,
destination: destination,
direction: direction
});
},
onSlideLeave: function(section, origin, destination, direction){
console.log({
section: section,
origin: origin,
destination: destination,
direction: direction
});
}
});
});
</script>
Done
Thanks for make jQuery plugin is developed by alvarotrigo For more Helpfull for users, please check the demo page or visit the official website.
