Slickhover.js

JavaScript

滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフェクトを実装することができるjQueryプラグイン「Slickhover.js」をご紹介します。目的のアイコンをフェードやスライドインで表示させることができます。何気にお洒落ですよね。

[ads_center]

使い方

jQueryとダウンロードしたプラグインを読み込んでいる状態で、以下のようにSlickhover.jsをセットします。アイコン、カラー、透明度といったオプションを任意で渡してあげます。

$(window).load(function(){
  $('.sample').slickhover({
    icon: "images/sample.png",
    color:"#cccccc",
    opacity:0.5,
    speed:800,
    animateIn: true
  });
});

画像を最適化するために以下のCSSも追加しておくといいみたいです。

img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
  position: relative;
  z-index: 2;
}

こういったさりげないエフェクトがとても素敵だと思います。デザインや機能がシンプルなので色々なところで活用できそうですね。

ダウンロードや詳細については以下からどうぞ。

値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatches」前のページ

Lightroomの段階フィルターが色んなところで活躍してくれるので便利次のページLightroomの段階フィルターの使い方

最近の記事

  1. FUNLOGY スピーカー
  2. 聖剣伝説 VISIONS of MANA
  3. エルデの追憶
  4. コーヒー豆
  5. マレニア様……
PAGE TOP