[JS]ページにちょっとしたイースターエッグを仕込むことができるスクリプト -Overscroll

サイト構築 -JavaScript

Post on:2015年2月9日

Overscrollのデモ

デモはオーバースクロールのゾーンがある、OS XのChrome, Safariでご覧ください。
WindowsやIE, Firefoxにはオーバースクロールのゾーンがないため動作しません。

デモページ

領域を超えてスクロールすると、ひょこっとイースターエッグが表示されます。
天地、どちらもOKです。

OS Xが手元にない場合は、下記の動画でデモを確認できます。

デモの動画

Overscrollの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<body>
  ...
  コンテンツ
  ...
<script src='../overscroll.js'></script>
</body>

Step 2: HTML

スクロールしてひょこっと表示するイースターエッグの要素は、「.easter-egg」を加えます。
配置は、<body>のすぐ下とか</body>のすぐ上あたりで。

<img class="easter-egg" src="./image.jpg" />

Step 3: CSS

イースターエッグの要素は、スクリーンから隠れるように配置しておきます。

.easter-egg {
    /* Dimensions */
    width: 300px;
    height: 500px;

    /* Fixed position */
    position: fixed;
    left: 50%;
    top: 0px;

    /* Centered horizontally, and hidden above screen */
    margin-left: -150px;
    margin-top: -500px;
}

Step 4: JavaScript

イースターエッグに使用する要素を指定し、スクリプトを実行します。

<script>
var overscroll = new Overscroll();
window.onload = function() {
    overscroll.bindElement(document.querySelector('.easter-egg-element'));
}
</script>

デモのように天地ともに表示させる時は、下記のように記述します。

<img class="easter-egg-element top" src="./img/awesome-source.png" />
<img class="easter-egg-element bottom" src="./img/awesome-source.png" />

<script>
var overscroll = new Overscroll();
window.onload = function() {
    overscroll.bindElement(document.querySelector('.easter-egg-element.top'), 'top');
    overscroll.bindElement(document.querySelector('.easter-egg-element.bottom'), 'bottom');
}
</script>