• かちびと.net

    モーダルウィンドウを表示する際に遠近感を付けるスクリプト・Avgrundのご紹介です。なかなか面白い目立たせ方ですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

モーダルウィンドウを表示する際に遠近感を付けるスクリプト・Avgrund

スポンサーリンク

モーダルウィンドウを表示する際に
遠近感を加えて分かりやすくする、
というコンセプトの元、作られた
スクリプト・Avgrundのご紹介です。
思いつきませんでしたが、結構いい
ですね、これ。

遠近感のあるモーダルウィンドウを実装する非依存型のスクリプトです。これはいいエフェクト。説明するより見たほうが早そうですね。

Sample

以下動作サンプル。ボタンを押せばモーダルウィンドウが表示されます。

確認出来ましたでしょうか。

コード

<script type="text/javascript" src="avgrund.js"></script>

avgrund.jsを読み込む。あとはマークアップです。

<button onclick="avgrund.activate();">クリック!</button>

avgrund.activate()をclickさせればイベントが発火します。

<aside class="avgrund-popup">
<p>
	hogehoge
</p>

<button onclick="avgrund.deactivate();">Close</button>
</aside>

class="avgrund-popup"がモーダルウィンドウとして呼び出されます。

簡単に使えるのがいいですね。スマフォでも動くか見てないので後で見てみます。ライセンスはMIT。

Avgrund

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services