スクロールしてもついてくる「Hachiko」 - ON／OFF機能付
当ページのリンクには広告が含まれています。
スポンサーリンク
スクロールしてもついてくるjQueryプラグイン「Hachiko」を紹介します。
jQueryプラグイン「Hachiko」
jQueryプラグイン「Hachiko」は、どんなに激しくスクロールしてもハチ公のように従順についてくるプラグインです。作者がハチ公の映画が好きなようです（参照：GitHubのFAQ）。しかも、このプラグインはON／OFFの機能付きです。ユーザーのアクションでついてくる／ついてこないを変更できます。どこまでも従順なやつだぜ。
スポンサーリンク
サンプル／デモを上下にスクロールしてみてください。また、下の方に「このボタンを押すとハチ公が元の場所に戻ります。」「このボタンを押すとハチ公が付いてきます。」という２つのボタンがあるので、試してみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hachikō(ハチ公) - jQueryプラグインまとめのカルマ</title>
<style type="text/css" media="screen">
body {
margin: 0 auto;
width: 800px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="js/jquery.hachiko.1.0.0.js"></script>
<script type="text/javascript">
$(function() {
$("#remove").on("click", function(){
$("#logo").hachiko("destroy");
});
$("#add").on("click", function(){
$("#logo").hachiko({bottom: 0, right: 0});
}).trigger("click");
});
</script>
</head>
<body>
<h1>Hachikō (ハチ公)</h1>
<p>下にスクロールすると……</p>
<div style="height:200px;"></div>
<p>jQueryプラグインの作者がハチ公の映画好きなようです。</p>
<img id="logo" src="logo_hachiko.gif"/>
<div style="height:200px;"></div>
<p>ハチ公のように従順？に付いてきます。</p>
<div style="height:200px;"></div>
<p>主人の元？を離れようとしません。</p>
<div style="height:200px;"></div>
<p>どんなに激しくスクロールしてもついてきます。</p>
<div style="height:200px;"></div>
<p>ハチ公は付いてきます。</p>
<div style="height:200px;"></div>
<p>このついてくる系のプラグインはON／OFFのアクションがついています。</p>
<p> </p>
<button id="remove">"このボタンを押すとハチ公が元の場所に戻ります。"</button>
<p> </p>
<button id="add">"このボタンを押すとハチ公が付いてきます。"</button>
<div style="height:200px;"></div>
</body>
</html>
ハチ公の可愛らしい画像、その他オプションや詳細はこちらからどうぞ。
» Hachiko
スポンサーリンク