JavaScript
Article
By Ritesh Kumar , Sam Deering

10 jQuery Horizontal Scroll Demos & Plugins

By Ritesh Kumar , Sam Deering

In today’s post we bring to you 10 jQuery Horizontal Scroll Demos & Plugins useful for those who see things horizontally. I guess we have to accept some people scroll both ways! :)

Updated: March 2016 Updated all plugins and demos with the latest versions and added some new ones. Also removed plugins which aren’t in development anymore.

1. ScrollMagic

Image of a top hat

ScrollMagic helps you to easily react to the user’s current scroll position. Its lightweight (6KB gzipped) and mobile friendly. It has support for both scroll directions.

See the demo

2. jInvertScroll

Screenshot of jInvertScroll homepage

jInvertScroll is a lightweight plugin for jQuery that allows you to move in the horizontal with a parallax effect while scrolling down.

See the demo

3. Horizontal Timeline

Mock-up of timeline screen

This tutorial will teach you to create an easy to customise, horizontal timeline powered by CSS and jQuery.

See the demo

4. Smooth Horizontal Scrolling with jQuery

Screenshot of the demo

This tutorial will teach you how to create a simple smooth scrolling effect using the jQuery Easing Plugin and just a few lines of jQuery.

See the demo

5. simplyScroll

Screenshot of a simplyScroll demo

simplyScroll is a flexible jQuery content scroller with touch support. It automatically supports unequal sized elements in loop mode.

See the demo

--ADVERTISEMENT--

6. Horizontal Scrolling with fullPage.js

Homepage screenshot for fullPage.js

fullPage.js is a jQuery-based plugin which allows us to build one-page scrolling websites. It not only works in all modern browsers, but also in some older ones like IE 8 and Opera 12.

See the demo

7. jQuery.kinetic

Banner image for jQuery.kinetic

jQuery.kinetic is a simple plugin which adds smooth drag scrolling with gradual deceleration to containers.

See the demo

8. Sly

Screenshot of Sly homepage

Sly is JavaScript library for one-directional scrolling with item-based navigation support. It can be used as a simple scroll bar replacement, as an advanced item based navigation tool, or as a great navigation and animation interface for parallax websites.

See the demo

9. pagePiling.js

Screenshot of pagePiling.js homepage

pagePiling.js is a jQuery plugin that helps to pile up your sections one over another and access them by scrolling or by URL. It is fully compatible with old browsers such as IE8 and Safari 12 and also works perfectly on mobile devices.

See the demo

10. Horizontal Scroll Tutorial

This tutorial will teach you to scroll your web content vertically, horizontally and even diagonally! Don’t worry, it won’t rely on JavaScript too much. It uses CSS/HTML for the layout and JavaScript only for the scrolling.

See the demo

Conclusion

This article reviewed a list of the 10 most used jQuery Horizontal Scroll Demos and Plugins. I hope you’ll find them useful for your projects. Do you know other plugins which could help? What do you use? Feel free to share your opinions and suggestions in the comments below.

More:
Recommended
Sponsors
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account