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

Post on:2015年2月9日

sponsorsr

デスクトップやスマホで、ページの領域を超えてスクロールするとバウンドするような感じになりますよね。その時にちょっとしたイースターエッグをアニメーションで表示する単体で動作する軽量スクリプトを紹介します。

Overscrollのデモ

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

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

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

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

[html]

...
コンテンツ
...

[/html]

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

[html]

[/html]

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

[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;
}
[/css]

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

[javascript]

[/javascript]

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

[html]

[/html]