Caption_Hover_Effects_jQueryプラグイン

画像hoverでフワッと動くjQueryプラグイン!CaptionHoverEffectsの使い方

 
最近のWEBサイトは画像やボタンをマウスオーバーすると、決まって何かしらのエフェクトというか動きがあって面白いですよね。
ついつい関係ない画像でも何が起きるのか期待してマウスオーバーしちゃうっていう人も多いのではないでしょうか。

ご多分に漏れず、私pei(@pei_babo)もその一人でございます。
本日はそんな画像hoverで「おっ!」っとさせるjQueryプラグインのCaptionHoverEffectsのデモと紹介をやっていきます。

プログラミングやWordPressを習得するのに一番近道な方法とは?



 

Caption Hover Effectsの使い方とデモ

今日紹介する「Caption Hover Effects」サイトはこちらですよ!

Caption_Hover_Effects_-_Demo_1

①まずダウンロードしよう

それでは早速ソースをダウンロードしていきましょう。
Caption_Hover_Effects-Codrops

実際使うのは「css」と「fonts」と「js」のフォルダです。
これらを任意の場所に設置してくださいね。
CaptionHoverEffects必要なファイル

 

②コードを書いてこう

コードを書くと言っても本当に簡単に実装出来ますので、ほとんどやることないです!

■ CSS

パスは各自設定したものにしてくださいね。

■ javascript

■ HTML

コードはこれだけです。

この「Caption_Hover_Effects」プラグインはエフェクトが全部で7個あるのですが、その7個のエフェクトを変更したければulクラスの「cs-style-1」の数字部分を変えれば良いだけ!という親切設計ですぜ。
例えばエフェクト3を使いたければ「cs-style-3」に変えるだけ、ということですね。

 

③デモを見てみよう!

エフェクト1〜7をまとめた簡単なデモを用意しましたので見てみてくださいぜ。

デモを見て頂ければ分かるかと思いますが、タイトルが長すぎるとリンクボタンと重なってしまうところがあるので、そこはちょっとカスタマイズが必要かも知れませんね。

 

注意点

このjQueryプラグインを使用する上で私が気になった注意点は、

まず①のタイトルの長さに注意するですが、前述しましたがタイトルが長すぎるとリンクボタンと重なってしまうようです。
重ならないような文字の長さにするか、リンクボタンを外して画像全体をリンクにするなど何かとカスタマイズが必要かな?と思いました。

②の画像の縦横サイズ比に関してですが、「4:3」のサイズ比にしないと、タイトルやサブタイトルが画像からはみ出してしまうようなことが起こりました。
ここも画像のサイズ比を固定するか、カスタマイズが必要かな?と思った部分ですね。

 

まとめ

注意点は多少ありましたが、運用を守るかちょっとカスタマイズするだけで「おっ!」と思わせる素敵な画像エフェクトが気軽に導入できるのは良いですよね。
是非一度お試しあれ!

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA