東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

レイアウトを二分割してスライドさせるプラグイン

2016.02.25 Posted by

こんにちは。

ウェブラボ技術メモです。

今回は少し動きのあるWebサイトで使えそうなプラグインをご紹介します。

どんなプラグインか、説明するより見て操作してみるのが一番でしょう。

ということで、まずはデモをご覧ください。

レイアウトが左右に分割され、スクロールすると別方向にコンテンツがスライドしていますね。

何か対比したいものを左右に並べても良いでしょうし、1つのコンテンツでも画像と文章で分けるなど、色々な見せ方ができると思います。

ページ上部と右側にナビゲーションがついているので、現在地も把握しやすいですね。

では早速実装してみましょう。

プラグインは下記よりダウンロードしてください。

・GitHub

https://github.com/alvarotrigo/multiscroll.js

まずは下記のようにJquery本体と一緒にプラグインのjsとcssを読み込ませます。

今回は一緒にjquery.easings.min.jsも読み込ませましょう。こちらのjsはイージング、つまり単調な動きだけでなく、加速や減速など動きに強弱のついたエフェクト
処理をつけるためのものです。

次にHTMLを記述します。

下記のように、左右のコンテンツを分け、その中にスライドさせるコンテンツを記述していきます。もちろんテキストだけでなく画像等どんなコンテンツを入れても構いません。

左コンテンツ1

左のコンテンツ1番目のものが入ります。

左コンテンツ2

左のコンテンツ2番目のものが入ります。

左コンテンツ3

左のコンテンツ3番目のものが入ります。

右コンテンツ1

右のコンテンツ1番目のものが入ります。

右コンテンツ2

右のコンテンツ2番目のものが入ります。

右コンテンツ3

右のコンテンツ3番目のものが入ります。

たったこれだけでデモのようなページが出来上がりです!

とても簡単に実装できる上に、今チェックしてみたところ、なんとこのプラグインはIE7でも動くようです。

旧バージョンのIEサポートが終わり、対象ブラウザからカットされる事が多くなってきましたが、どうしても対応させなければならない!というような時にもこれなら安心して使えそうですね。

というわけで、今月の技術メモは以上です。

次回もお楽しみに!

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278