このページの本文へ

シングルページをラクして作る!横スクロール系jQueryプラグインならこの10本

2016年08月18日 10時35分更新

文●Ritesh Kumar

  • この記事をはてなブックマークに追加
本文印刷
おしゃれなキャンペーンサイトで見かける、横スクロールのシングルページ。jQueryのプラグインを使えば、あまり苦労せずに作れるかもしれません。

今回はコンテンツを水平にスクロールできる便利なjQueryのプラグインを10個ご紹介します。
(追記:2016年3月に更新。本記事で紹介されているプラグインとデモをすべて最新バージョンにアップデートしました。さらにいくつか新しいものも追加しています。バージョンアップされていないプラグインは除外しました)

1. ScrollMagic

01

ScrollMagicを使えば、現在のスクロール位置を簡単に見つけられます。容量も軽く(6KB gzip圧縮)、モバイル対応もしています。水平・垂直、両方向のスクロールに対応しています。

デモはこちら)

2. jInvertScroll

02

jInvertScrollは容量の軽いjQueryプラグインです。視差効果を使った水平プラグインです。

デモはこちら)

3.水平タイムライン

03

この記事は、CSSとjQueryに対応したカスタマイズ可能な水平タイムラインを作成する方法を紹介しています。

デモはこちら)

4. jQueryを使ったスムーズな水平スクロール

04

この記事では、プラグイン「jquery.easing」と数行のjQueryを使って、シンプルでスムーズなスクロール効果を作成する方法を紹介しています。

デモはこちら)

5. simplyScroll

05

simplyScrollは、スマートフォンにも対応しているフレキシブルなjQueryスクロールプラグインです。不均等なサイズの要素でもループモードで自動スクロールしてくれます。

デモはこちら)

6. fullPage.jsを使った水平スクロール

06

fullPage.jsはページ全体をスクロールできるjQueryベースのプラグインです。すべての最新版ブラウザーに対応しているだけでなく、IE 8やOpera 1など、一部の古いブラウザーにも対応しています。

デモはこちら)

7. jQuery.kinetic

07

jQuery.kineticは、ゆるやかに減速するスムーズなドラッグとスクロールを提供します。

デモはこちら)

8. Sly

08

Slyはアイテムごとに遷移できる一方向のスクロール型ナビゲーションのJavaScriptライブラリーです。シンプルなスクロールバー代わり、上級者向けのナビゲーションツール、パララックスなWebサイトでのナビゲーション、アニメーションのインターフェイスなどとして使うのも良いでしょう。

デモはこちら)

9. pagePiling.js

09

pagePiling.jsは重ねられたセクションに、スクロールかURLでアクセスできるjQueryプラグインです。IE8やSafari 12などの古いブラウザーにも完全対応しています。もちろん、モバイル対応しています。

デモはこちら)

10.水平スクロールのチュートリアル

10

この記事では、Webコンテンツを垂直、水平、もしくは斜めにスクロールする方法を紹介しています。JavaScriptをたくさん使うわけではないのでご安心を。レイアウトにはCSS/HTMLを使い、スクロールのみにJavaScriptを使います。

デモはこちら)

最後に

便利なjQuery水平スクロールデモとプラグインを10個ご紹介しました。プロジェクトの参考にしていただけたら嬉しいです。

(原文:10 jQuery Horizontal Scroll Demos & Plugins

[翻訳:wasabi
[編集:Livit

Web Professionalトップへ

WebProfessional 新着記事