2017-10-03

Endless Horse で学ぶ jQuery プラグイン「jScroll」

Endless Horse というサイトがある。

hooooooooooooooooooooooooooooooooooooooooooooooooooooooooorse

アクセスすると馬の AA が表示され、何やら足が下に伸びている。どこまで続くのかとスクロールしてみると、馬の足が無限に伸びていく。

…ただそれだけのサイトだ。本当にそれだけ。

で、どうやって馬の足が無限に伸びているのかというと、どうやら jScroll という jQuery プラグインを使っているようだった。

予め jQuery と jScroll を読み込んでおき、jQuery で以下のように実装していた。

$(function () {
  $('#horse').jscroll({
    padding: 2000,
    loadingHtml: ''
  });
});

jQuery 実装だけ見ると、特にリンク先のような指定はない。

調べてみると、jScroll というプラグインは、指定の要素内の最後にある a 要素のリンク先を自動的に取得して無限スクロールを実現してくれるようだ。

<div id="horse" class="centered" style="padding-top: 222px">
  <pre>
    <!-- 馬の AA -->
  </pre>
<a href="legs.html"></a>
</div>

HTML 側はこんな感じ。legs.html というリンクを自動的に取得して、それをページ内に繋げて表示しているようだ。

もう察しがついただろうか。legs.html の内容はこうなっている。

<pre id="segment">
  <!-- 馬の足部分の AA -->
</pre>
<a href="legs.html"></a>

legs.html 内に、自分自身 legs.html へのリンクを設けている。これを jScroll が検知して更に取得・連結表示しているのだ。

無限スクロールは本来、1記事が2ページ目・3ページ目と続く場合や、次の記事を連続して表示したりするような使い方をする。しかしこのサイトは、同じ1つの HTML を次のページとして読み込ませることで、無限に続く馬の足を実現していたのだ。

アイデア勝負というか、通常本来の意図とは異なる使い方をして面白い効果を生み出した例だろう。

ちなみに .horse というドメイン、1年間で4800円程度の維持費がかかる。このネタサイトに毎年5000円もかけているとは…。

<!--
    endless.horse
    Colleen Josephson and Kyle Miller, 2015
    Created during the West Coast Stupid Shit No One Needs & Terrible Ideas Hackathon
-->

Kyle Miller さん…。