時間に応じて影の位置を変えられるjQueryプラグイン「Four Shadows」

時間に応じてコンテンツを変えるなんてのが昔ありましたが、昨今も時間やデータに応じて表示するものを変えていくというのは見直しつつあります。
jQueryプラグインの「Gigacore/four-shadows」を利用するとアイコン画像などを時間に応じて切り替えさせることが可能です。
時間に応じて影の位置を変えられるjQueryプラグイン「Four Shadows」サンプル

使用方法
Gigacore/four-shadows ? GitHubからファイル一式をダウンロード。
下記を</body>上にでも記述します。
<style>
.fs-icon {width: 512px; height: 512px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="fourshadows.js"></script>

また画像の「icons」ディレクトリをアップしたパスをfourshadows.jsのiconsPathに記載しします。
あとは以下のように対象画像を用意すれば完成です。
<div class="fs-icon fs-cast" data-icon="mail.png"></div>
mail.pngは/icons/ディレクトリにアップしてある必要があります。
サンプルの画像を見てもわかりますが、スプライトさせた画像を時間に応じて切り替えるのみですので、考え方次第では応用が効きそうです。

時間に応じて影の位置を変えられるjQueryプラグイン「Four Shadows」サンプル"

sponsors

「時間に応じて影の位置を変えられるjQueryプラグイン「Four Shadows」」をシェアする

記事作成:
記事URL:

TOP > > > 時間に応じて影の位置を変えられるjQueryプラグイン「Four Shadows」