Creepyface

Creepyfaceはマウスポインタに合わせて画像を変更できるスクリプトです
※ダミー画像サービスを利用しており、複数読み込んでいる為、動作するまで時間かかります

不気味な顔、というスクリプトの名前通り、顔写真を使う事を想定して作られており、マウスを画像内の人物が追いかけるようなコンテンツを作る事が出来ます

さまざまな場所を見ている顔写真を用意できませんでしたので画像が変わるだけの動作サンプルを用意しました。実際に想定された動きを見たい場合は本スクリプトのWebサイトでご確認下さい

使い方

僕はWebカメラを使わないのでこんな表示ですが、スクリプトサイトでは各方向の写真を撮る事が出来ます

使い方は非常に簡単、スクリプトを読み込んで画像タグに指定のカスタムデータ属性と該当の画像を設定するだけです

<script src="https://creepyface.io/creepyface.js"></script>

スクリプト読み込み。依存ライブラリはありませんので単体で動作します

<img src="def.jpg"
data-creepyface
data-src-hover="hover.jpg"
data-src-look-0="01.jpg"
data-src-look-45="02.jpg"
data-src-look-90="03.jpg"
data-src-look-135="04.jpg"
data-src-look-180="05.jpg"
data-src-look-225="06.jpg"
data-src-look-270="07.jpg"
data-src-look-315="08.jpg"
/>

説明は不要な気がしますが、ご想像通り各方向の角度がカスタムデータ属性の名前になっています

MITライセンスのもと、OSSとして公開されています

Creepyface