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. Jquery-Slider

    JavaScript

    水平の画像タイムラインを実装できる「Jquery-Slider」

    Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴…

  2. Accessible Mega Menu
  3. stickyNavbar.js
  4. Tiny slider
  5. AnimateScroll

    JavaScript

    面白いエフェクトのページ内スクロールを実装できるjQueryプラグイン「AnimateScroll」…

    ページの任意の場所にスクロールできるjQueryプラグイン「Anima…

  6. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

コメント

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

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

最近の記事

  1. iPhone 11 Pro Smart Battery Case ホワイト
  2. 渋谷スクランブル交差点
  3. ベーコンエッグ&厚切りバタートースト
  4. 有栖川公園
  5. 広尾のスタバ

アーカイブ

PAGE TOP