[JS]マイクロインタラクションを簡単に！よく使うUIエレメントに操作している感覚をアニメーションで与えるスクリプト -Tilt
カード、パネル、ボタンなど、よく使うUIエレメントをユーザーの操作に応じてふわりと浮かせ、アニメーションでぐりぐりと動かして視差効果を与えるJavaScriptの超軽量ライブラリ（jQueryのプラグインも可）を紹介します。 CSSアニメーションが苦手なグラデーションやシャドウでも60fpsの滑らかな動きを実現します。 Tilt.js -GitHub このアニメーションGIFは軽量化のためコマを落としているので、実際の滑らかな動きは下記のデモでお楽しみください。 Tilt.jsの使い方 Tilt.jsは単体でも、jQueryのプラグインとしても動作します。 ※スクリプトがそれぞれ異なります。 vanilla-tilt.js -単体版 Tilt.js -jQueryのプラグイン版 基本書式 HTMLに「data-tilt」を加え、当スクリプトを外部ファイルとして記述します。
![[JS]マイクロインタラクションを簡単に！よく使うUIエレメントに操作している感覚をアニメーションで与えるスクリプト -Tilt](https://cdn-ak-scissors.b.st-hatena.com/image/square/725c3bf66a12921823f06acb252f0fc74725f6e0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017013001.png)
ローカルファイルにキャッシュアクセスするJavaScript·imgcache.js MOONGIFT
imgcache.jsはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 画像の読み込みを速くする際にはキャッシュを使うのが有効です。最近であればeTagを付けたりすると思いますが、より高速化するために使ってみたいのがHTML5のFile APIを使ったimgcache.jsです。 インスペクタで見ると分かりますが、ファイルシステムへアクセスしています。 実際にアクセスしているURLを出力しています。httpの上にfilesystemが追加されています。 実際にキャッシュされているファイルの一覧も取れます。 同一ドメインの他、外部ファイルでもキャッシュさせられます。 imgcache.jsはリモートへのネットワーク接続も行われないため、オフラインでも利用できます。さらに高速です。ただしChromeのみで、かつ専用のフラグを立てて起動しなければ
ユニークなイラストやデザインを使った2013年カレンダーいろいろ
1年を通して使うということもあってカレンダーにはこだわりたいものですが、悩んでいるうちに1月も半ばになってしまった……という人の参考になるようなちょっと変わったデザイン・イラストのカレンダーをCoalesceIdeasが集めています。どれもユニークかつ美しく、見ているだけでも楽しめます。 25+ Unique and Creative 2013 Calendar Designs | CoalesceIdeas http://www.coalesceideas.com/unique-creative-2013-calendar-designs/ ◆01:PKO bank polski 2013 Calendar 実物はこんな感じ。 各月にそれぞれおとぎ話のようなイラストが掲載されています。 ◆02:oberhaeuser.info calendar 2013 12ヶ月分の各曜日が横並びになる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
