blog
copyright ©
creamu Inc. All Rights Reserved.
art direction & design: Kunitaka Kawashimo
code, interaction & photography: creamu Inc.
category: Technology

shrinkして消えて現れるAjaxエフェクト『Effect.shrink | scriptaculous』

Pocket

shrink.js
テストで作っていた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