予想以上に便利！画像変化系のオレティメットコードが使え過ぎる
見てみる
スマホのタップ、PCのマウスオンで画像が変化するショートコード
ブンブンハロー要注意。
どうも、リアルで自分より家事をやってる旦那さんに会った事ない
さて、(話題変更)
前回、超簡単に画像を変化させて表示するオレティメットショートコードを紹介しました。
その時に一緒にアップしていた残り２つのショートコードを覚えているでしょうか？
マウスホバーで画像効果ホバーでクッキリ画像
の２つです。
今回はそのうちのひとつ、マウスホバーで画像効果のほうを紹介いたします。
オレティメットコード『マウスホバーで画像効果とは？』
マウスホバー・・・って知ってます？
簡単に説明すると、
マウスホバーとは？
別名、『オンマウス』または『マウスオーバー』。
『ホバー』と略されることもある。
マウスのポインター(カーソル)をテキストや画像、リンク等の上に重ねる行為のこと。
このとき、対象がアクション、変化することを『ロールオーバー』、『ホバーアクション』などと言う。
一般的にホバー時のみ変化するものが多く、マウスカーソルを外すと画像はもとにもどる。
だいたいそんな感じ。
inoway
うん、そんな感じですね。
要はこの
【マウスホバーで画像効果】
のオレティメットコードは画像にロールオーバー効果を付けるショートコードです。
つまりこのショートコードはカーソルを乗せたら変化する画像が超簡単に創れる魔法のコード。
・・・・・
ま、
それはさておき、さっそくオレティメットショートコード【イメージホバー画像効果でロールオーバーアクション】を使っていきま～す。
ホバーアクションの種類
と、その前にこのコードを使用して画像に適用されるホバーアクション(画像効果)の種類をザッと紹介します。
アクションの種類
- 拡大表示
- 縮小表示
- 傾き表示
- 円形表示
- 立体風表示
- リンクっぽい表示
良いものがあれば今後も追加していきます
それでは実際にサンプル画像を使用してホバーアクションを確かめてみます。
で、そのサンプル画像なんですが今回無理言って某有名イラストレーターのかたに特別に描いてもらいました！！
コレです
[su_alpi code="arrow4l-r-b"]
あ、実はだいぶ前に自分で描いたやつです。
え？
こんなカラフルで美しい作品をサンプルに使用したら容量オーバーしちまうんじゃないかって？
案ずるなかれ。
ちゃんと対策は取ってあります。
はい、原画です。
メモ紙に手書きの。
しかも超圧縮して12KBにまでシェイプしました。
と、いうわけで今回はこちらのアート作品のプレミア原画を使ってコードの効果を検証していきたいと思います。
ホバー確認の注意事項
検証の前に注意事項をひとつ。
この
マウスホバーで画像効果のオレティメットコードですが、中身は単純なCSSコードの反映です。
属性として
で、この hover さんなんですが実はスマホやタブレットなどのタッチデバイスでは機能しなかったりするんですね。
まあ、そもそもスマホではマウスホバーとか馴染みありませんしね・・・
ですが、タッチ(タップ)には反応するみたいです。
なのでスマホ、タブレットの方は画像をタップして効果を確認して下さい。また元に戻したい場合は他の関係無いところをタップしてみて下さい。
お使いのブラウザー環境によりホバーアクションが反映されない場合もあります
拡大表示
触るとちょっとだけ大きくなります。
エロい意味ではありません
縮小表示
さわると急激に萎え・・・小さくなります。 触ると右に少しだけ傾きます。 まるで 触ると立体的な感じになります。 厳密には奥に傾いてるだけなんですが、まあ、それっぽいという事で(笑) くるくる回って気持ちいいやつです。 ついつい多用してしまう悪魔の効果(大げさ) 拡大しながら丸く。 縮小しながら丸く。 傾き表示 立体風表示 回転表示 円形表示ここまでのホバー効果と組み合わせて使用する変化です
傾きながら丸く。
立体っぽく丸く。
回転しながら丸く。
いや、どのタイプみたいに言うな
リンクっぽく変化
さらにもう一手間として組み合わせ出来る変化。
ホバー時にリンクっぽい演出をかもしだします。
ほら、よくありますよね？
画像の上にカーソル置いたら
「これはリンクですよー」
「クリックで違うページに飛ぶよー」
って感じで変化するやつ。
例えば少しだけ画像が透けるとか、影が出来るとか。
こちらはそのようなエフェクトを画像にあたえる項目です。
拡大とリンク。
縮小とリンクと丸く。
部屋とワイシャツと私。
他のギャラリー系ショートコードと組み合わせる
はい、コチラのオレティメットコード
【マウスホバーで画像効果】
も前回紹介した
【画像効果】のショートコードと同じく、究極拡張プラグイン
スライダーとかカルーセルにですね。
ではやってみましょう♪
スライダーの場合
拡大するリンクっぽいスライダー。
縮小するレスポンシブかつクリックorタップによりlightboxで確認できる高速スライダー(早口)
カルーセルの場合
立体的な動きをするリンクっぽいカルーセル。
けっこういいですね。
回転カルーセル。
わー気持ちいい(笑)
ギャラリーの場合
これはさらにハイブリッド。
ギャラリーに前回紹介した画像効果のオレティメットコードと今回のマウスホバーを重ねがけ。
もともと傾いた状態からスタートすることによって手前から奥へグッと動く演出ができました。
この重ねる、合わせる、の組み合わせで他にもいろいろ出来そうですね〜。
やっぱショートコードの入れ子、面白い♪
まとめ
メンバーサイトへはコチラから登録出来ます
Short codes Ultimate の様々な機能と３つの拡張アドオンは公式サイトで詳しく確認出来ます。
公式サイト トップページ
Short codes Ultimateのショートコード一覧
拡張アドオン追加のスキン
拡張アドオンエクストラショートコード
拡張アドオンショートコードクリエイター
まとめてお得バンドルアドオン
リンク先はプラグイン制作元の海外のサイトになります。英語が苦手なかたは私と同じようにGoogle等の日本語翻訳機能をお使い下さい。
[su_tweet tweetw=" "]1013401276543987713[/su_tweet]