次へ

極意（52）オンマウスで画像変形（CSS）

WordPressでは、当り前のCSSを使った画像変形効果を、HAIKでも出来ないかといろいろ試行錯誤の結果、見事に実装できました。画像の移動・拡大・縮小・回転・傾斜等、サイトに様々な効果を与えたい時は、基本的にCSS3の「transform」プロパティで行います。
画像にちょっとした上記の動きを付けるだけでもサイトのリッチ感が向上します。

概略の設定手順ですが、ページの先頭でCSSをBeforeスクリプトで記述します。
実際の画像表示は、HTMLタグで&showを挟んで使用します。

オンマウスで画像移動

オンマウスで画像移動

オンマウスすると画像が右下方向に若干移動します。


オンマウスで画像拡大

オンマウスで画像拡大

オンマウスすると画像が拡大します。当サイトのトップページで使用している画像表現が、この画像拡大機能に相当します。


オンマウスで画像拡大・その２

オンマウスで画像拡大

前記と同様にオンマウスすると画像が拡大しますが、画像の枠内での拡大となります。

前記との違いは、CSSの設定の違いがあります。即ち、以下の設定が追加されています。

width: 300px;
height: 300px;
overflow: hidden;

その解釈として、拡大する枠を制限し、はみ出した部分を隠している結果で、そのようになっています。


オンマウスで画像反転

オンマウスで画像反転

オンマウスで画像が反転します。


オンマウスで画像傾斜

オンマウスで画像傾斜

オンマウスで画像が傾斜します。


ソースコードの一部分を公開します。

[check]CSSを記述するスクリプト文

#beforescript{{
<style type="text/css">
<!--
/*ここに上のcssを入れる*/
-->
</style>
}}

[check]画像表示するHTMLタグ部分

#html2(<div class="CSSのクラス名">)
&show(画像ファイル名,,画像説明);
#html2(</div>)


引用参照したサイトです。