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

2016/08/18

Ritesh Kumar

0

Articles in this issue reproduced from SitePoint
Copyright © 2016, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2016, KADOKAWA CorporationJapanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

おしゃれなキャンペーンサイトで見かける、横スクロールのシングルページ。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

Copyright © 2016, Ritesh Kumar All Rights Reserved.

Ritesh Kumar

Ritesh Kumar

Webデザイナー / 開発者。IIT Roorkeeで電気工学の学位を取得。新しいWebのテクノロジーや新しい人と知り合うことが大好き。コードを書いていないときはたいていゲームしています。

Loading...