[JS]簡単に画像表示のエフェクトを変更できるスクリプト

Image Transition Managerは、画像表示のエフェクトをHTML箇所に指定するだけで、変更できるスクリプトです。

Image Transition Manager
デモページ

現在実装されているエフェクトは、「switchoff」「slidedown」「blinddown」「slideright」「appear」「switch」「blinddown」「grow」「shrink」と９種類あります。
画像表示のエフェクトを変更するには、下記のようになります。

<ul>
<li><a href="image1.jpg" rel="transition[switchoff]">image1.jpg</a></li>
<li><a href="image2.jpg" rel="transition[slidedown]">image2.jpg</a></li>
<li><a href="image3.jpg" rel="transition[blinddown]">image3.jpg</a></li>
<li><a href="image4.jpg" rel="transition[slideright]">image4.jpg</a></li>
<li><a href="image5.jpg" rel="transition[appear]">image5.jpg</a></li>
<li><a href="image6.jpg" rel="transition[switch]">image6.jpg</a></li>
<li><a href="image7.jpg" rel="transition[blinddown]">image7.jpg</a></li>
<li><a href="image8.jpg" rel="transition[grow]">image8.jpg</a></li>
<li><a href="image9.jpg" rel="transition[shrink]">image9.jpg</a></li>
</ul>

Image Transition Managerを利用するには、「transition.js」を外部スクリプトとして使用し、その他に「prototype 1.5.1.1」と「script.aculo.us 1.7.3」が必要となります。

Post on:2008年3月3日