shrinkして消えて現れるAjaxエフェクト『Effect.shrink | scriptaculous』
テストで作っていたAjaxエフェクトをメモもかねてエントリー。
scriptaculousを見ていて、shrinkが面白かったので実装してみました。
↑の画像をクリックしてみてください。
shrinkして消えて現れます。
仕組みとしては、Effect.Shrink(this)で該当のdivをshrinkして、window.setTimeoutでタイマーをセットして、Effect.Appear(\’shrinkjs\’で2500ミリ秒後にappearさせています。
■HTMLソースは下記のとおり。
<div id="shrinkjs" onclick="new Effect.Shrink(this); window.setTimeout(‘Effect.Appear(\’shrinkjs\’, {duration:.3})’,2500);"><img src="/mt/img/shrink.jpg" alt="shrink.js" border="0"></div>
■headのソースは下記のとおり。
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
prototypeなどはバージョンが違うと動かないことがよくあるので、最新のものを使ってください。
ほかにもいろいろと実装してみたいですね。
scriptaculousのデモは↓から!
»
scriptaculous Demo