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. no-image

    JavaScript

    多彩な方向に表示できるツールチップ「jq-tooltip」

    jq-tooltipは多彩な方向に表示可能なツールチップを実装できるj…

  2. gliojs

    JavaScript

    viewportから離れた時にイベントをトリガーしてくれる「gliojs」

    gliojsは、ページを閲覧している時にマウスがviewport(表示…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのマウス操作のイベントをまとめてみる

    マウス操作に関するイベントをまとめてみました。まとめたイベントはmou…

  4. overhang.jp

    JavaScript

    シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

    overhang.jsは、通知バーを実装するためのjQueryプラグイ…

  5. JavaScript

    とても簡単にクールなドロップダウンを実装できるjQueryプラグイン「DropKick」

    個人的に使いやすそうだったので備忘録です。DropKickというjQu…

  6. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

コメント

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

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

最近の記事

  1. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  2. ライオン システマ 超コンパクト ふつう
  3. タリーズ ハムチーズ&サラダサンド
  4. クリニカのY字タイプのフロス
  5. 日和山公園の桜

アーカイブ

PAGE TOP