Scroll]を極限までカスタマイズ。Scroll]を極限までカスタマイズ。Scroll]を極限までカスタマイズ。Scroll]を紹介します。スクロールしてページの最下部まで移動すると、次のページの情報を自動で読み込み、ページの遷移無しで次々とコンテンツを表示してくれます。ご存知のとおりFacebookのフィードやTwitterのタイムライン、TumblrのUIなど、超有名SNSサイトやモバイル版のアプリケーションでも導入されているので、その挙動は誰もが一度は体験しているでしょう。最近ではクリエイティブ系のブログでも比較的多く実装されていて、需要も高まっているので、ウェブクリエイターの方々はマスターしておくべき技術の1つだと言えます。Scroll]の実装方法を紹介するだけでなく、弊社オンズが実際に行った極限カスタマイズの方法も伝授します。追加コンテンツをフェードインしながら表示させる。以下より本編をどうぞ。Scroll]は[jQuery]無しでは動きません。配布ページからは「jquery.infinitescroll.js」をダウンロードします。ZIP」というボタンからダウンロードしましょう。src="jquery.infinitescroll.min.js"></script></head>ちなみに「jquery.infinitescroll.js」と「jquery.infinitescroll.min.js」の違いは、単にファイルを圧縮してあるか否かなので、記述してある内容は同じです。2.1.0」のケースだと圧縮前のファイルが41KB、圧縮済みファイルが25KBとなっています。約15KBというのは微々たるものですが、ほんの僅かでもサイトの高速化を図るために、圧縮してある「jquery.infinitescroll.min.js」を利用することをお勧めします。<head>~</head>内で各スクリプトを読み込んだら、次は無限スクロールで表示させるコンテンツ部分を作り込んでいきます。ここでは仮に、トップページで「index.php」というファイルを使っていて、その後に続く各ページのファイル名が「index-2.php」「index-3.php」「index-4.php」であると想定して説明していきます。中の主要コンテンツ部分の記述例です。class="article"><p>ここに「index.php」のコンテンツが入ります。href="index-2.php">次のページ</a></p></div></div></body>コンテンツは「article」というクラス名の要素の中に記述され、ナヴィゲーション部分には「navigation」というクラス名が付いています。リンク先はもちろん「index-2.php」になっていますね。class="article"><p>ここに「index-2.php」のコンテンツが入ります。href="index-3.php">次のページ</a></p></div></div></body>同様に「index-3.php」「index-4.php」......と続くファイルも準備しておきます。初期設定を行う以上で準備が整いましたが、これだけでは無限スクロールが起動しません。別途スクリプトの初期設定を記述する必要があります。記述する場所は「jquery.infinitescroll.min.js」を読み込んだ後が適当でしょう。内に戻り、以下のように追記します。".article"});});</script></head>以上。Scroll]が動きます。Scroll]を起動させるには「navSelector」「nextSelector」「itemSelector」の3つの値を指定します。追加で指定できるオプションも合わせると、以下のような機能があります。finishedMsg全てのコンテンツを表示し終えたときのメッセージmaxPage読み込みを行う上限回数animateコンテンツのロード時にアニメーション処理を行うか否かextraScrollPxアニメーションでスクロールする量をピクセルで指定。デフォルトの値は150。した場合のみに有効bufferPx次のコンテンツをロードするタイミングを指定。ピクセル単位で指定する。値を大きくするとより早いタイミングでローディングが開始されるerrorCallback404エラーが発生したときの処理を記述。所謂コールバック関数を指定できる。その他の細かい設定は以下のリンクより、公式サイトを参照してください。Scroll]の極限カスタマイズ......というワケで、ここから先は中級者~上級者仕様のカスタマイズ方法です。一部コアファイルのコードも書き換えているので初心者の方にはお勧めできません。以下のリンク先よりサンプルをご覧ください。More」のボタンをクリックすると次のページのコンテンツが読み込まれるように改造してあります。フェードインしながらコンテンツが表示されており、ローディング中のアニメーションの処理にも手が加えられ、表示・非表示が大変スムーズになっています。その他、気づきにくい点ですが、最大ページ数をあらかじめ指定しておくことで、最後のページ以降の読み込みを停止し、サーバー側で404エラーが発生しないように仕込んでいます。それぞれのカスタマイズの解説をしていきます。追加コンテンツをフェードインしながら表示させる。デフォルトの状態だと単にコンテンツがいきなり表示されるだけですが、コールバック関数を指定してフェードインしながらゆっくりと表示させます。通常のオプション設定の後に続けて以下のコードを挿入すればOKです。{$(newElements).hide().delay(100).fadeIn(600);});これなら簡単ですね。ボタンのクリックで次のコンテンツを表示させるスクロールによって自動でローディングを行うのではなく、手動でクリックなどの動作によって無限スクロールを起動させたいときは、処理を一時「unbind」して、クリックによって再起動「retrieve」するようにコードを記述します。具体的には以下のようになるでしょう。false;});このとき、環境によってはナヴィゲーションのボタンがうまく再表示されないケースがあります。解決策としてコールバック関数を定義します。先ほどの「フェードイン表示」と併記すると、以下のようなコードになります。{$(newElements).hide().delay(100).fadeIn(600);$(".navigation").appendTo("#content").delay(300).fadeIn(600);});これでナヴィゲーションが常に最下部に再表示されるようになります。ローディング中の画像のセンタリングについてローディング中の画像やメッセージは「#infscr-loading」というボックス要素の中に表示されます。auto;を指定しておけば充分なはずです。auto;}しかし実際の挙動を注意深く観察してみると、画像やメッセージが左端から中央までスライドして表示されてしまいます。原因はjQueryメソッドの「show()」を使っているためです。この挙動を直すにはコアファイルの「jquery.infinitescroll.min.js」を直接編集する必要があります。ローディング画像に関する記述で.show(s.loading.speed,e.proxy)というコードがあるはずなので、この「show」の箇所を「fadeIn」等のjQueryメソッドに書き換えましょう。Scroll]の機能を網羅して説明してきましたが、初心者の方にはつまずく箇所が所々あるかと思います。そんなとき、もしサイトをWordPressベースで構築しているのであれば、プラグインを利用してしまうのが手っ取り早いでしょう。Jetpackを使っているのであればボタン1つで無限スクロールを有効化できるのでさらに便利です。この記事で説明したようなカスタマイズは難しいですが、基本的な機能は充分に使えます。WordPress.com各種設定も管理画面から行えるので初心者の方にはWordPressプラグイン版の利用をお勧めします。Masonry]との相性が良く、さらに優れたUIを実装できるようになります。Scroll]の使い方を説明していきますのでご期待ください。Scroll]オンズではこのような各スクリプトの実装のお手伝いも承っております。比較的安価で最新・高機能なシステムを導入できますので、ご希望の方はお気軽にお問い合わせください。お問い合わせはオンズのお問い合わせフォームからどうぞ。TwitterFacebookGoogle+FeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【jQuery】背景色を複数のグラデーションで彩るプラグイン「Shards」の実装方法。Ripples]を使ってみる。【JavaScript】超軽量・超高速のJavaScriptフレームワーク[Vanilla.js]をオススメします。【jQuery】レスポンシヴ対応のスライダー[flickity]は今後の定番になるでしょう。「cubic-bezier()」の値をまとめてみた。【jQuery】重複しない複数の要素をランダムに表示する方法。