固定画像でなくズームイン作動を付け加える
記事内に置く画像にマウスを当てると緩やかにズームインするエフェクトは、ＥＣサイト等
ではよく使われる手法
ま、何気ないサイトでも使われてはおりますが.....
固定化された画像でも、それはそれでレベルが高ければ何らそん色はないものですが
さらに動きを加えることにより一層与えるインパクトが強くなるので、利用価値は
多くあると解釈します
フォトサイト、フォト系ブログ、画像てんこ盛りのサイトを作りたいとか願うなら
利用するべき画像掲載法と理解しますが、いかがでしょう
参照 マウスを当てて反応をご確認ください
こちらは、シリウス機能、レイアウト枠で横に並べました
イチカラムなら、table（テーブル）を使えば、3つ4つと横並べできます
取り付け方法
ＨＴＭＬ 記事内に置く画像記述ですね
まず記述を見てください
<div class="srico">
<img src="<% pageDepth %>img/710094.jpg" style="width:500px;px;height:300px;" alt="" />
</div>
シリウス機能で読み込む画像記述は必ず、横縦の数値を書き足してください
数値指定がありませんと、ＣＳＳ指定で動かせないんですね
<img src="<% pageDepth %>img/710094.jpg" style="width:320px;" alt="" />
では、動かないということ...
画像コードをdiv class記述で囲み読み込ませるわけですね
class名は、スタイルシートで一つのサイズを指定しますが
異なるサイズをサイト内で作動させる場合は、別なクラス名でＨＴＭＬとＣＳＳに
追加します
次は、スタイルシートでＣＳＳコード追加
以下の記述は、上のclass名に合わせていますのでそのままスタイルシートの
どこかに、わかりやすい、忘却しない場所へ張り付けてください
.srico {
width: 500px;
height: 300px;
overflow: hidden;
}
.srico img {
-moz-transition: -moz-transform 1.9s linear;
-webkit-transition: -webkit-transform 1.9s linear;
-o-transition: -o-transform 1.9s linear;
-ms-transition: -ms-transform 1.9s linear;
transition: transform 1.9s linear;
}
.srico img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
ここまで
異なるサイズで別に画像を置く際は、以下のようにclass名及びサイズを変えて
もう一つ追加します
.sricon {
width: 300px;
height: 300px;
overflow: hidden;
}
.sricon img {
-moz-transition: -moz-transform 1.9s linear;
-webkit-transition: -webkit-transform 1.9s linear;
-o-transition: -o-transform 1.9s linear;
-ms-transition: -ms-transform 1.9s linear;
transition: transform 1.9s linear;
}
.sricon img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
調整方法
1.9sの数値を0.5とかに小さくすると反応スピードは増します
1.5の数値変更で視差を調整します
画像コードのサイズ数値とスタイルシートの数値は同じにしてください
出ないと、表示にずれが現れます
枠に収まらず拡大してゆく...それも手法の一つですが...
ただ、画像したとした記事の間にスペースが空いてしまうが難点？
画像サイズは、width:500px;px;height:300pxで
スタイルシートでの数値指定は以下にしました例
width: 800px;
height: 400px;
備考
画像は、記事内に限らずフリースペースにも入れられます...です
記事内、フリースペースに掲載はできるとなれば、残るはヘッダー画像、
サイト背景で使えるか..ですね
ヘッダー
検証しましたところ、、ＭＴＭＬのヘッダー画像を
<div class="srico"> </div>
囲んでも動きませんでした
シリウスで自動読み込みのヘッダーＨＴＭＬでは動きが指示できないようです
で、その他弄り回したところ、スタイルシートで、class名を#headerに切り替え
調整は複数必要ですが、反応はしました
機能で読み込まれるヘッダー画像を読み込み不能にして、<div class="srico"> </div>で
指定する画像を読み込むようにするのですね
サイトによりけりですが、いい画像を用意すればいいイメージを打ち出す
ことができるでしょう
.sricon {
width: 300px;
height: 300px;
overflow: hidden;
}
.sricon img {
-moz-transition: -moz-transform 1.9s linear;
-webkit-transition: -webkit-transform 1.9s linear;
-o-transition: -o-transform 1.9s linear;
-ms-transition: -ms-transform 1.9s linear;
transition: transform 1.9s linear;
}
.sricon img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
ただし、当サイトの場合ですと半透明ナビが不透明に変化してしまいました
その他でいえば、ナビを置く場合、すべてのページで同一場所ならが条件とも
なります
その他でいえば、ヘッダーテキストが表示されないとかの影響があります
私の場合、他サイト含めすべてが、半透明ナビを付けていますので、即座の
検証に進めませんが、以降調整してみます
サイト背景について、やはり機能を使用せず、スタイルシートで直接背景画像を
指定すれば反映できました
こちらも、当サイトの形状では反映できないので、後ほどカスタマイズ具合を
調整して公開いたします