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. JavaScript

    テキストに滑らかに動くアニメーションをつけることができるjQueryプラグイン「animateTex…

    テキストに滑らかに動くかっこいいアニメーションをつけることができるjQ…

  2. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

  3. no-image
  4. RV gallery-slider

    JavaScript

    軽量でタッチフレンドリーなギャラリースライダー「RV gallery-slider」

    RV gallery-sliderは軽量でタッチフレンドリーなギャラリ…

  5. lightgallery.js
  6. no-image

    JavaScript

    ページ読み込み時に画面上部にプログレスバーを表示する「Skylo」

    Skyloはページ読み込み時にプログレスバーを画面上部に表示できるのが…

コメント

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

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

最近の記事

  1. EOS RP
  2. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  3. スターバックス ハシエンダ アルサシア
  4. イングリッシュマフィン

アーカイブ

PAGE TOP