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;
}

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

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

関連記事

  1. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  2. Shine

    JavaScript

    ダイナミック(動的)で美しいシャドウを実装できるJSライブラリ「Shine」

    ShineというJavaScriptライブラリが素敵だったのでメモがて…

  3. HCaptions

    JavaScript

    ホバー時に色々なエフェクトでキャプションをオーバーレイ表示できるjQueryプラグイン「HCapti…

    指定した要素をホバーすると色々なエフェクトでキャプションをオーバーレイ…

  4. ssi-modal

    JavaScript

    フレキシブルでパワフルなモーダルウィンドウを実装できる「ssi-modal」

    ssi-modalはカスタマイズ性に優れたフレキシブルでパワフルなモー…

  5. JavaScript

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

  6. Rythim.js

    JavaScript

    音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」

    Rythm.jsは、あなたのホームページに躍動感を与えてくれるjsライ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP