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

こんにちは。

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

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

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

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

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

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

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

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

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

・GitHub

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

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

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

次にHTMLを記述します。

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

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

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

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

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

次回もお楽しみに!

  • このページを共有する