スクロールで切り替えられるjQuery「multiScroll.js」

一風変わったデザインを作りたい

浦島です。今回は左右二分割して上下からカッコよく現れるjQueryプラグイン「multiscroll.js」を紹介していきます。
今回も非常に簡単なコードで実装することができます。
まずは公式サイトでサンプルをご覧ください。

必要なファイルをダウンロードしよう

公式サイトからフォルダをダウンロードしたら解凍しましょう。
今回必要なファイルは「jquery.easings.min.j」、「jquery.multiscroll.js」この二つです

コードの書き方

jquery とmultiscroll.jsを読み込みましょう

先ほどのファイルとjQueryのcdnを読み込んでいます。

htmlのこの様に書き込んでいきます。

 

スクリプトを読み込んでいきましょう

これが一番標準的な動作です
他にもオプションがあるのでこちらで確認してください

オプションを見る

最終的なコードはこちら

セクションに色をつくて動作がわかりやすい様にしてみました。
※ divのクラス名を変えてしまうと動作しなくなるので,cssをいじる場合はidをつけましょう

以上,スクロールで切り替えられるjQuery「multiScroll.js」の紹介でした。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)