Create Horizontal Paging Website with jQuery horizonScroll

“Out of the box” thinking is a must for designers and developers if they want to create an appealing and rather different online experience.

Horizontally scrolling websites became popular in the last couple of years and they are preferred from a large part of the design/development community. I think that they will become even more popular because of their unique presentation of information.

Vertical scrolling is a classic way to convey messages and structure content but for some it is quite boring. Bearing in mind that there is a large percentage of users browsing through mobile devices such as tablets, horizontally scrolling websites are tempting for product or portfolio websites.

In my opinion, for certain types of websites; specifically, ones that require visual presentation of information, it is a brilliant and unusual solution that will help you stick out from the crowd.
jquery-horizon-scroll
Demo Download

Creating a horizontal website is not that difficult. In this article, I am presenting a quite simple solution you can adopt and implement if you are keen on trying this type of design.

How to implement horizontal scrolling:


First of all, you need to load the required jQuery library and the horizonScroll plugin.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.horizonScroll.js"></script>

Next, you need to include the jQuery touchSwipe plugin for touch swipe and mouse drag support.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>

HTML structure


After setting up the required jQuery library and plugins, you need to create the HTML structure.

Related post:  MediumLightbox.JS – Elegant Image Zoom

Creating the navigation:

<div class="horizon-prev"><img src="images/l-arrow.png"></div>
<div class="horizon-next"><img src="images/r-arrow.png"></div>

Creating the sections:

<section data-role="section" id="section-section1"></section>
<section data-role="section" id="section-section2"></section>
<section data-role="section" id="section-section3"></section>
<section data-role="section" id="section-section4"></section>

Add the required CSS:

html,
body {
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 overflow: hidden;
}
 
section {
 float: left;
 display: block;
 height: 100%;
 padding: 0;
 margin: 0;
}
 
.horizon-prev,
.horizon-next {
 position: fixed;
 top: 50%;
 margin-top: -24px;
 z-index: 9999;
}
 
.horizon-prev { left: 20px; }
.horizon-next { right: 20px; }

Initialize the plugin with default options:

$('section').horizon();

Here are the default plugin options:

$('section').horizon({
scrollTimeout: null,
scrollEndDelay: 250,
scrollDuration: 400,
i: 0,
limit: 0,
docWidth: 0,
sections: null,
swipe: true,
fnCallback: function (i) {
}
 
});

Have a look at the demo to see how it works. Click on the download button to start playing with it.

Demo Download

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close