Horizontal Scroll One Page In jQuery – FullPage.js

Layout
Demo    Download
Horizontal Scroll One Page In jQuery - FullPage
File Size: 75.89 KB
Views Total: 2396 views
Last Update:November 24, 2020
Publish Date: March 10, 2020
Official Website: Go to website
License: MIT

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. 

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

1. Include the latest version of jQuery library 

<script src="jquery-latest.min.js"></script>

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

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

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


Kayla Matthews

Howdy! I'm a web designer and developer. I built CSS-Tricks, a website all about building websites, going strong for 5 years.