27 6月

写真をちょっと動かすplugin

投稿に写真をつけたときに、何か効果をつけたいなと思ったことはありませんか?

マウスオンした時にちょっと飛び出した感じに動かしたり、色がちょっと明るくなったりするwebページはよく見かけますよね。

今回はその中でも画像が動くプラグインです。

 

主な機能

貼り付けた画像に様々な効果をつけることができます。
標準では正方形にトリミングされるので、横幅と高さは指定した方がよいです。

概要

コード内にオプションを書き加えていくことで、効果を重ね付けできます。
どんな効果ができるのかを確認したうえで使うことになるのでしょう。

使い方

制作者サイトが閉じてしまっているため、正確な使い方は不明なことを最初にお断りしておきます。


1.メディアを追加ボタンなどから、投稿または固定ページ内に画像を貼り付けます。
2.コードの書き方を参考に、自分でコードを書き足して効果をつけます。

通常効果のみ

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg"]

これが標準仕様っぽいです。
元の写真の縦横比に関係なく、正方形にトリミングされます。
縦横比率は下記をご参照ください。

グレイスケール

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" grayscale="yes" ]

マウスオンするとカラーに戻ります。

横のずれ幅(基準値:-15)

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" move_x="-45" ]

何も指定しないと-15

縦のずれ幅(基準値:-15)

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" move_y="-45" ]

何も指定しないと-15
横のずれ幅も一緒に大きくなっている気がします。

Z軸のずれ幅(基準値:20)

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" move_z="45" ]

何も指定しないと20

横の回転幅(基準値:15)

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" rotate_x="45" ]

何も指定しないと15

縦の回転幅(基準値:15)

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" rotate_y="45" ]

何も指定しないと15

Z軸の回転幅(基準値:15)

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" rotate_z="45" ]

何も指定しないと15

透明度(基準値:0.5)

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" opacity="0.2" ]

0~1で指定可能

画像レイヤー数(基準値:4)

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" extra_imgs="2" ]

1~5で指定可能

はみ出した部分の処理(基準値:visible(表示))

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" overflow="hidden" ]

元の画像の大きさからはみ出した部分を表示するかしないかをvisibleまたはhiddenで指定。

横幅(基準値:300px)

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" width="300px" ]

ピクセル値で指定

縦幅(基準値:300px)

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" height="160px" ]

ピクセル値で指定

フィットスクリーン(基準値:no)

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" fitscreen="yes" ]

yesまたはnoで指定

リンク(基準値:#)

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" link="https://allfun.co.jp/box" target="_self"]

urlを指定。target=”_self”またはtarget=”_blank”で同ウィンドウかどうかの指定も可能。基準値は_self

境界線(基準値:1px)

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" border="0px"]

ピクセル値で指定。

角の丸め(基準値:なし)

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" radius="100%"]

ピクセル値またはパーセントで指定。

組み合わせてみた例

[wppe_effect url="https://allfun.co.jp/box/images/psample.jpg" move_z="45" radius="10px" border="0px" extra_imgs="3" opacity="0.8" height="250px" ]


 


感想
いくつかの効果を重ね付けすると、何かの時に使えそうな気がします。
投稿loop内でicatch画像につけてみるのも面白いかもしれません。