画面2分割スクロールを実装できる jqueryプラグイン

はじめまして、熊本のウェブ制作会社キューブの西田です。

今回ご紹介させて頂くjqueryプラグイン

｢multiscroll.js – split multi-scrolling pages plugin｣

の使い方をご説明していきたいと思います。

最近ではよく見られる、パララックスエフェクトなどのような視覚効果で訪問者にインパクトを与えるwebサイトが増えてきていますね。

｢multiscroll.js｣は、パララックスなどとは違う一風変わった効果を実現できます。

まずは、文で説明するより見て頂いたほうがわかりやすいので、

こちらのデモをご覧ください　≫ デモサイト

フルスクリーンの画面左右が上下逆の動きでスクロールします。

今までの手法と違った面白い動きを表現できますね！

Step1.　ダウンロード

こちらから、ダウンロードを行い必要なファイルを準備します。

multiscroll.jsプラグイン

Step2.　プラグインの準備

まずはheadタグ内に下記を記述します。

[html]



[/html]

Step3.　オプションの設定

[html]




[/html]

Step4.　HTMLの記述

bodyタグ内に、メニュー部分とコンテンツの部分を記述します。

[html]

• セクション1
• セクション2
• セクション3

[/html]

以上で基本的には実装が完了です。

他にも様々なオプション機能がありますので用途に合わせて使用してみてください。

オプションの使い方も下記に記述しています。

Step5.　その他オプション

[html]




[/html]

今回、ご紹介しましたjqueryも含め、最近は面白い動きを取り入れたwebサイトがどんどん増えてきていますね！

｢multiscroll.js｣を用いたら、おしゃれでインパクトのあるLPなども簡単に作れそうです。

今後もwebに関してだけでなく色々な記事を増やしていきますので、今回この記事をご覧頂けました方も面白いことや、気になるものがありましたら、是非私にもご紹介してください！