no-image

PSYCHO-PASS サイコパス公式サイトのJS技術がすごい

現在放映中のアニメ、PSYCHO-PASS サイコパス の公式サイトを見ていたのですが、なかなかおもしろいテクニックが使われていたので紹介。

Screen Shot 2013-01-19 at 19.34.49.jpg

画面左がナビゲーションサイドバー、右側がタイル上に表示されたコンテンツになっているのですが、右側は緩やかにスクロールしています。このスクロールは、無限にスクロールするようになっていて、コンテンツの最下部に近づくと、自動的に最上部のコンテンツが表示されるようになっています。

コンテンツをタイル上に表示するのは、masonryというjQueryプラグインで行う事ができます。

jQuery Masonry

これは他のサイトでもたまに見ることがあったのですぐにわかったのですが、無限スクロールがどうやってるのかわからなくて、ソースコードを見たところ、home.jsのコメントから、該当コードを見つける事ができました。

jQueryでWebサイト内を無限にスクロール出来るようにする – かちびと.net

コードを見ると、スクロール位置をコントロールする事で、無限にコンテンツが続いているように見せている事がわかります。

こういうのって、ひと昔前はFlashでやったりしてたけど、最近はJSでやる事が増えて来ましたね。おもしろい。