Vertical/Horizontal Scroll One Page In jQuery – FullPage.js

Layout
Horizontal Scroll One Page In jQuery - FullPage
File Size: 75.89 KB
Views Total: 12439 views
Last Update:March 18, 2024
Publish Date: September 20, 2013
Official Website: Go to website
License: MIT
Plugin Author: alvarotrigo
Demo    Download

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 :

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.
List Of Version :
  • v.2.7.5
  • v.2.2.8
  • v.2.0.1
  • v1.7.6
  • v1.7.5
  • v1.7
  • 4.0.22
  • 4.0.21
  • 4.0.20
  • 4.0.19
  • 4.0.18
  • 4.0.17
  • 4.0.16
  • 4.0.15
  • 4.0.14
  • 4.0.13
  • 4.0.12
  • 4.0.11
  • 4.0.10
  • 4.0.9
  • 4.0.8
  • 4.0.7
  • 4.0.6
  • 4.0.5
  • 4.0.4
  • 4.0.3
  • 4.0.2
  • 3.1.2
  • 3.1.1
  • 3.1.0

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.