マウスカーソルをマグロに変えて404ページにストーリー性を持たせる

jiro.gif

404ページのストーリー

カーソルがマグロになって出現し、泳いでいくと鮨と遭遇。そしてお互いが重なったとき、鮨職人にまつわる映画に出会うというストーリーです。

CSSのcursor

普段マウスカーソルを意識することはあまりないと思いますが、CSSで制御できるカーソルの種類は意外と多いです。よく見るものでは、テキスト選択時のtextやリンクのpointer、待ちのwaitなどがありますが、他にも色々と用意されています。

説明
auto コンテキストに基づいて設定
default ふつうのカーソル
pointer 指差しマーク
text 選択できるテキスト
wait 砂時計など
move 動かせるやつ
not-allowed 操作できないやつ
zoom-in ズームイン
zoom-out ズームアウト
grab 掴める
grabbing 掴んでる

ざっと使えそうなものを列挙しましたが、まだまだあるので気になる方はMDNの方で確認を。

cursorの一覧

cursorに画像を指定する

cursorには、用意されているキーワード以外にURLで画像を指定することもできます。

.maguro {
  cursor: url(/images/maguro.png), auto;
}

画像が読み込めないor無効な場合に備えて、フォールバックとしてautoを指定しておきます。IEではpngに対応していないため、curaniファイルを用意する必要がありますが、マグロの前ではIEなど無力なのでスルーすることにします。

cursorプロパティで値にURLを指定する

404ページのベースを作る

404.png

日本語のサイトなので、Not Foundではなく未発見という文字を中央に表示します。

見つからない虚しさを演出する

blur.gif

ページに虚しさを加えるために、CSSのblurで未発見をファサッとさせます。

// fasaという名前のアニメーションを
// 始まりを2秒遅らせて
// 6秒の周期で繰り返す
.error-notfound {
  animation: fasa 6s infinite 2s;
}

// $easeOutCubic: easingの変数
@keyframes fasa {
  0%,
  100% {
    filter: blur(0px);
  }
  20% {
    filter: blur(16px);
    animation-timing-function: $easeOutCubic;
  }
  45% {
    filter: blur(4px);
    animation-timing-function: $easeInOutCubic;
  }
  60% {
    filter: blur(0px);
    animation-timing-function: $easeOutCubic;
  }
}

カーソルをマグロに変更し、鮨と遭遇させる

meets.gif

ページへカーソルが乗ったときにマグロが出現し、中央付近に近づくと未発見の文字が鮨にすり替わります。マグロが鮨と遭遇する、最も盛り上がるシーンです。cursorプロパティは継承されますが、aタグにはデフォルトでpointerが指定されているため、上書きする必要があります。

maguro.html
<div class="error-page">
  <a href="/movie/271" class="error-notfound">未発見</a>
</div>
maguro.scss
.error {
  &-page {
    cursor: url(/images/maguro.png), auto;
  }
  &-notfound {
    cursor: url(/images/maguro.png), auto;
    &:hover {
      color: transparent;
      background: url(/images/sushi.png) center center no-repeat;
    }
  }
}

二郎は鮨の夢を見る

jiro.gif

マグロが鮨をクリックすると、鮨職人の映画へ遷移します。

この映画は、伝説的職人である「すきやばし次郎」の店主・小野二郎さんと、その背中を追う長男・禎一さんの仕事を捉えたドキュメンタリーです。物語の起伏は少なめですが、一朝一夕ではならない職人の仕事を淡々と映しつつ、偉大な父を追う禎一さんの苦悩が描かれています。

cursorをマグロに変えてニヤニヤしている自分を思わず恥じてしまう、素晴らしい映画です。それにしても3万円か・・・

以上、404ページにストーリーを持たせる試みでした。

未発見 | 邦画の予告を、朝まで

関連リンク

[紹介元] CSSタグが付けられた新着投稿 – Qiita マウスカーソルをマグロに変えて404ページにストーリー性を持たせる

関連記事