マウスオーバーでスライドするパネル「Sliding Pop Hover」

当ページのリンクには広告が含まれています。

jQuery Plugin » エフェクト » マウスオーバーでスライドするパネル「Sliding Pop Hover」

マウスオーバーでスライドするパネルを実装するプラグイン「Sliding Pop Hover」を紹介します。

jQueryプラグイン「Sliding Pop Hover」

このプラグインを使えば、指定した要素にマウスカーソルをもっていくとスライドしながら登場するパネルを実装することができます。

画像にパネルを重ねタイトルを表示したりする場合に便利ですね。アイデア次第ではその他にもいろいろ使えそうですね。

それではデモページの画像にマウスオーバーしてみてください。

「Sliding Pop Hover」のデモ

デモのソース（HTML + jQuery）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Switchy のデモでーす。">
<title>Switchy - jQueryプラグイン</title>
<style>
.display-item {
  margin: 0 auto;
  width: 600px;
  height: 389px;
}
.panel {
  background-color: #ECECEC;
  padding: 50px 0;
  text-align: center;
  font-size: 50px;
}
</style>
</head>
<body>
<h1>Switchy のデモでーす。</h1>
 
<div class="display-item">
  <div style="display: inline-block">
    <img src="sakura.png"></img>
  </div>
  <div class="panel">
    <h2>桜！</h2>
  </div>
</div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.slidingpophover.js"></script>
<script>
$(document).ready(function(){
  $(".display-item div:first img").load(function() {
    $(".display-item").slidingPopHover({
      duration : 200
    });
  });
});
</script>
</body>
</html>

jQueryプラグイン「Sliding Pop Hover」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）