フローティングメニューの使い方(スクロールするメニュー) : HTMLコーディングのノウハウ : HTML/XHTML、CSSコーディング最安保障~クロノドライブ~

今回は、ブラウザのスクロールに合わせてするする付いてくるフローティングメニューのご紹介です。
あまり使う機会はありませんが、覚えておくといざというときに便利です。

それでは早速使い方のご紹介

必要なデータを揃える

まずは、JQUERY SCROLL FOLLOWから下記ファイルをダウンロードしましょう。

ここではファイル名を下記の通り保存しました。

  • jquery.js
  • jquery-ui.js
  • jquery.easing.js
  • jquery.scrollfollow.js

ディレクトリはこのようになりました( jsフォルダの中にダウンロードした jsファイルが全て入っています)。

HTMLからjsデータを読み込む

フローティングメニューを使用するHTMLファイルから先ほどダウンロードした jsファイルを読み込みます。
{path}の部分はHTMLファイルからのパスにしてください。

<script type="text/javascript" src="{path}/jquery.js"></script><script type="text/javascript" src="{path}/jquery-ui.js"></script><script type="text/javascript" src="{path}/jquery.easing.js"></script><script type="text/javascript" src="{path}/jquery.scrollfollow.js"></script><script type="text/javascript">

次にフロートさせる要素のIDとオプションの設定をします。ここでは #sideBar をフロートさせる要素のIDとして指定しています。このID指定を間違えると動かないので気をつけましょう

<script type="text/javascript">$( document ).ready( function (){        $('#sideBar').scrollFollow({});});//オプション$( document ).ready( function () {        $( '#sideBar' ).scrollFollow( {                //アニメーションの速度の設定。0 にするとアニメーションなしになります。                speed: 500,                //ブラウザの領域とフロート要素との余白。0にするとぴったりくっつきます。                offset: 0        } );} );</script>

最後に、フロートさせる要素に position: relative; か position: absolute; を指定します。
これで完了です。
◆サンプル
▼HTMLデータのダウンロード

jsファイルは再配布すると怒られちゃうかもしれませんので、自力でダウンロードしてください・・・!

—————

ブラウザ側の実装が不十分な position: fixed; の代わりに使うことでデザインの幅も広がりそうですね。

Tomahawk | おいぬま日報

CentOS 6.2で sudo 付きのコマンドを送る場合は

tomahawk -o=-t -l -h localhost 'sudo uptime'

のように、-o=-t をつけます。これでssh時に pseudo-tty が割り当てられる。ちなみに今開発中の0.5系はデフォルトで -o=-t がつく状態になっています。

あと、-D でデバッグ出力が有効になります。同僚からバグ報告をもらったのですが、”sudo: sorry, you must have a tty to run sudo
” と言われているので、「ああ、そういうことか」とわかりました。

$ bin/tomahawk -D -l -h localhost 'sudo uptime'[DEBUG] options = Namespace(command=['sudo uptime'],continue_on_error=None, debug=True, delay=0,expect_delay=0.050000000000000003, expect_encoding='utf-8',expect_timeout=None, hosts='localhost', hosts_files=None,no_sudo_password=False, output_format='${user}@${host} %${command}n${output}n', parallel=1, profile=False,prompt_login_password=True, prompt_sudo_password=False, ssh='ssh',ssh_options=None, ssh_user=None, timeout=10)[DEBUG] arguments = ['sudo uptime']Enter a password for ssh authentication:Enter a password for sudo: [DEBUG] command = ssh, args = ['-l', 'kazuhiro', 'localhost', '/bin/sh','-c', '"sudo uptime"'][DEBUG] expect index = 1[DEBUG] expect.EOF[DEBUG] child closed.[DEBUG] exit_status = 1[DEBUG] line = kazuhiro@localhost's password: *********[DEBUG] line = sudo: sorry, you must have a tty to run sudo[DEBUG] output_text = sudo: sorry, you must have a tty to run sudo[error] kazuhiro@localhost % sudo uptimesudo: sorry, you must have a tty to run sudoCommand failed ! (status = 1)[error] Command "sudo uptime" failed on host "localhost"

画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images ) – かちびと.net

画像にエフェクトをかけて拡大表示
したり、スライドを作ったり、ツール
チップで表示したり、というような
画像を使用したjQueryプラグイン
が沢山あるのと、探してる方が直ぐ
に見つけられるように、という事で
リンク集を作りました。

という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。

結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。

リンクにマウス乗せればキャプチャが出ます。

    Lightbox

    Lightbox風に画像を表現できるjQueryいろいろ

  1. Lightbox2 / ベーシックなタイプ。グループ化可能
  2. colorbox / 多数のエフェクトが実装可能でグループ化も出来る
  3. FancyBox / ロードとオーバーレイが素敵なLightbox
  4. prettyPhoto / 太枠と角丸のLightboxでタイトルは枠外に付ける
  5. ThickBox / 画像以外にテキストでも出来る。グループ化可能
  6. jQuery lightBox plugin / アニメーションが可愛い。グループ可能
  7. Slimbox / これもアニメーションとオーバーレイが素敵
  8. Facebox / Facebookライクなやつ。テキストとかも対応
  9. NyroModal / シンプルで多機能。アニメーションが素敵
  10. Pirobox / インターフェースが素敵。グループにするとより素敵です
  11. FancyZoom meet-jquery / スムーズに拡大縮小します。オーバーレイは無し
  12. imgBox / オーバーレイの有無を選択できる
  13. IMAGEBOX / アニメーションかわいいです
  14. PICBOX / ダイナミックに表示。画像もドラッグで移動できます
  15. CeeBox / フレームなどにも対応した多機能ライブラリ
  16. TopUp / 動画やFlaにも対応した多機能Lightbox
  17. NotesForLightBox / ベーシックなやつ。オーバーレイにアニメは無い
  18. YoxView / 拡大アニメーションの素敵なLightbox
  19. Fancy Zoom / 人気のLightbox。アニメーションが好みです
  20. Image Zoom / 拡大アニメーションがスピーディー
  21. ZOOMIMAGE / スムーズに拡大します。グループ可
  22. Sexy LightBox / 上からストーンと落ちてくる
  23. Image Magnify / シンプルで軽量なLightbox
  24. SuperBox! / オーバーレイが独特
  25. スライド / ギャラリー

    スライド、ギャラリーやカルーセルなどなど

    1. ベーシック

  26. slideViewer / ツールチップも実装するスライダー
  27. jFlow / ベーシックなスライダー。キャプション付
  28. jQuery.flickrGallery / ベーシックにクリックで画像を表示させるギャラリー
  29. Photo Slider / サムネイルが可愛いギャラリー
  30. s3Slider / 自動で変わっていくギャラリー。キャプションが素敵
  31. jqGalScroll / エフェクトの無い、シンプルなギャラリー
  32. Dynamic Image Gallery / サムネイル付きのシンプルギャラリー
  33. GalleryView / サムネの大きさも選べるギャラリー
  34. AD Gallery / スピード感のあるスライドのギャラリー
  35. Moving Boxes / 画像とキャプションが拡大しながら切り替え
  36. slideViewerPro / キャプション、サムネ付きのベーシックスライダー
  37. Pikachoose / フェードエフェクトのギャラリー、サムネ付
  38. CrossSlide / フェードのみのシンプルギャラリー
  39. Apple-style Slideshow Gallery / Appleライクなクールスライダー
  40. jqFancyTransitions / ブラインドエフェクトがクールなギャラリー
  41. Nivo Slider / いくつかのエフェクトが使えるスライド
  42. A Simple jQuery Slideshow / フェードのみのシンプルなスライド
  43. Image Strip / ベーシックなコンパクトギャラリー
  44. jQuery Blinds / スピーディーなブライドエフェクトのシンプルなギャラリー
  45. BBC Radio 1 Zoom Tabs / オンマウスでメニューが出てくるベーシックスライダー
  46. jquery.showcase / フェードするギャラリー。マウスを乗せるとキャプション
  47. jQuery slideView / 縦にスライドするシンプルスライダー
  48. 2. ユニーク

  49. SPACEGALLERY / 奥から順に表示されるユニークなギャラリー
  50. jQuery Cycle Plugin / 省スペースで複数エフェクトのあるミニギャラリー
  51. Slider Gallery / ドラッグで移動するスライダー
  52. jQuery.popeye / 省スペースのギャラリー
  53. supersized / 画面いっぱいに画像を使うギャラリー。リンクも貼れる
  54. Beautiful jQuery slide / キャプション表示がクールなスライドギャラリー
  55. morphing gallery / 画像の大きさに合わせられたユニークなギャラリー
  56. ImageFlow / ドラッグで動かし、画像に反射や拡大も加えてある
  57. Sliding Image Gallery / 次の画像をクリックするとその次のが出てくる
  58. Animate Panning Slideshow / 斜めにも移動するギャラリー
  59. Looped Slider / 戻らずにループするスライドギャラリー
  60. Mosaic Slideshow / 升目で切り替わるユニークなスライド
  61. Zoomer Gallery / オンマウスで拡大、キャプションがアニメーションするギャラリー
  62. Smooth Div Scroll / マウスを乗せるor自動で動くスライド
  63. Simple Controls Gallery / オンマウスでナビが出てくるコンパクトギャラリー
  64. z-index gallery / 1枚1枚後ろに行くユニークなギャラリー
  65. Image Cube / ボックスで表現したユニークなギャラリー
  66. Micro Image Gallery / コンパクトながらサムネ表示にも切り替えられるギャラリー
  67. background image slideshow / 背景と同時にキャプションも変えるダイナミックスライダー
  68. Flip! / 画像がひっくり返るスライド
  69. Switch Display / グリッドと縦並びに変更可能なギャラリー
  70. jFancyTile / タイル状に切り替わるギャラリー
  71. Gallery Slider Plugin / 全画面を使ったダイナミックギャラリー
  72. 3. コンテンツごとスライド

  73. Easy Image or Content Slider / 縦にも出来るしテキストも出来るコンテンツスライダー
  74. horinaja / ベーシックなコンテンツスライダー
  75. loopedSlider / テキストにも対応したコンテンツスライダー
  76. Slick and Accessible Slideshow / テキストも対応のベーシックなコンテンツスライダー
  77. Making a Content Slider with jQuery UI / ドラッグで動かすコンテンツスライダー
  78. Content Slider with jQuery / アニメーションが独特なコンテンツスライダー
  79. EOGallery / アニメーションが面白いコンテンツスライダー
  80. dualSlider / 動画にも対応したコンテンツスライダー
  81. simplesli.de / 見た目の素敵なコンテンツスライダー
  82. 4. 多機能

  83. Galleria / 超多機能なスライドギャラリー。おすすめ
  84. Galleriffic / 様々な形を選べる高性能ギャラリー
  85. JQUERY MULTIMEDIA PORTFOLIO / ドラッグで動かすタイプ。動画にも対応
  86. FeaturedContentSlider / サムネ、キャプションも付いたコンパクトギャラリー
  87. Start/Stop Slider / テキストと画像がクロススライド。ストップ機能付
  88. AnythingSlider / 高機能で人気のスライダー
  89. COIN SLIDER / エフェクトが多数あるギャラリー、キャプション付
  90. jQuery.slideShow({}); / 色々なタイプのある多機能ギャラリー
  91. aviaslider / エフェクトが豊富なシンプルギャラリー
  92. カルーセル

  93. prettyGallery / テキストにも対応したカルーセル
  94. jQuery Image Scroller / 自動で流れ、オアウスオーバーで止まり、キャプションを出す
  95. Infinite Carousel / シンプルで汎用的なカルーセル
  96. Step Carousel Viewer / ナビゲーション付きのカルーセル
  97. jCarousel / 人気の高機能カルーセルプラグイン
  98. jCarousel Lite /  ベーシックなカルーセル
  99. jQuery.ScrollShow / アニメーションがユニークなカルーセル
  100. Agile Carousel / コンテンツごとスライドするカルーセル
  101. infinite JQuery carousel / ベーシックで使いやすそうなカルーセル
  102. Feature Carousel / サークル状に移動するカルーセル
  103. Tiny Carousel / 縦にもスライド可能なカルーセル
  104. bxCarousel / スッキリしてシンプルなカルーセル
  105. ツールチップ

    ツールチップ内に画像を含められる、または画像で表示可能なもの

  106. jtip / 画像とテキストを一緒に出せるツールチップ
  107. clueTip / こちらも画像とテキストを出せる。エフェクト無し
  108. Digg-style post sharing tool / ソーシャルメディアアイコンをツールチップで表示
  109. jQuery Popup Bubble / フェードインしながら画像が降りてくるツールチップ
  110. Easiest Tooltip / この記事で使ってるやつです
  111. Simple CSS + Javascript Tooltip with jQuery / マウス追従ツールチップ。テキストでも画像でも
  112. Coda Bubble / ふわっと浮き上がるエフェクトが可愛いツールチップ
  113. Sticky Tooltip / ベーシックな画像ツールチップ。マウス追従
  114. BeautyTips / 様々なタイプに対応した多機能ツールチップ
  115. Thumbnail Hover Popup / こちらも画像をツールチップで出す
  116. qTip / 柔軟性の高い高機能ツールチップ
  117. tinyTips / 軽量のツールチップ
  118. MopTip / divなども使える国産高機能ツールチップ
  119. マウスオーバーエフェクト

    マウスを乗せた時のエフェクトを実装するもの

  120. Sliding Boxes / 画像がスライドして別jコンテンツを出したりキャプション出したり
  121. Creating an Image Slider / ガレージ式に画像が降りて別の画像を表示
  122. Image Overlay / キャプションがアニメーションで表示
  123. Photo Zoom Out Effect / マウスを乗せると縮小される珍しいタイプ
  124. Thumbnail with Zooming Image / キャプションとちょいズームを実装
  125. Hover Zoom / オーバーレイと縮小するエフェクト
  126. captify / シンプルなキャプション表示
  127. hover-block-jquery / スムーズに画像がスライドする
  128. Greyscale Hover Effect / モノクロになる珍しいエフェクトを実装
  129. Hover fading transition / フェードしながら切り替わるボタン
  130. Fade Method / フェードしながら切り替え
  131. Stunning Sliding Door Effect / 4方向に分かれる面白いエフェクト
  132. Using Opacity to Show Focus / 画像を載せると別の画像にエフェクトをかける
  133. Thumbnail with Fading Caption / クールなエフェクトで切り替える
  134. jSquares / マウスを乗せるとハイライト化、コンテンツが浮き上がる
  135. hoverFade / フェード効果を与えるライブラリ
  136. Fade In-Fade Out / 画像にオンマウスで画面全体をフェードインアウト
  137. 拡大

    拡大鏡的なもの

  138. JQZoom / マウスの動きに合わせて脇に拡大鏡を表示
  139. Featured Image Zoomer / 拡大したままマウスホイールで調整も可能
  140. Cloud Zoom / エフェクトがクールなズーマー
  141. Image Power Zoomer v1.1 / こちらもマウスで拡大調整可能です
  142. AnythingZoomer / シンプルな拡大鏡
  143. Loupe and Lightbox / Lightbox効果をプラスした拡大鏡
  144. Apple-like Retina Effect / 丸い拡大鏡のズーマー
  145. Zoomple / ツールチップで画像の一部を拡大表示
  146. メニューっぽいやつ

    ギャラリーとどう違うのか分からないけどメニューになりそうなもの

  147. Image Rotator with Description / サイドのメニューをクリックすると画像が変わる&キャプション
  148. Fancy Thumbnail Hover Effect / サムネイルをクリックすると大きな画像が切り替わる
  149. Feature List / 見た目もクールなイメージタイプのナビゲーション
  150. slidedeck / マウスだけで全てを閲覧できるスライドメニュー
  151. Content Slider Using jQuery UI / ベーシックな画像ナビゲーション
  152. bxGallery / シンプルな画像ナビゲーション
  153. Background Image Navigation / 背景がマウスオーバーでスライドするメニュー
  154. IconDock / アイコンが滑らかに拡大していくドックメニュー
  155. Horizontal Tooltips Menu / アイコンメニューにツールチップがスムーズに追従
  156. Realistic Hover Effect / 影や反射のあるアイコンがふわっと浮くエフェクト
  157. Rolling Rounded Menu / アイコンが回転しながら開くユニークなメニュー
  158. Garage Door Style Menu / ガレージのドアのように開く画像メニュー
  159. Animated Menus / ゆっくり切り替わるクールなメニュー
  160. Outside the Box / アイコンが滑らかに拡大するドックメニュー
  161. BubbleUp / ユニークなアニメーションで拡大するアイコン
  162. AutoSprites / cssスプライトとjQueryをあわせたメニュー
  163. jQuery Dashboard / ダッシュボードパネルに隠されたアイコンメニュー
  164. Smooth Animated Menu / すとんとアイコン付きの画像が降りてくるメニュー
  165. Elastic Thumbnail Menu / スムーズに拡大するサムネイルを使ったメニュー
  166. megamenu / 画像がドロップダウンするメガメニュー
  167. Spy Effect / 縦にどんどん下がっていくアイコン付き可変メニュー
  168. quicksand / アニメーション付きでソートできるアイコンメニュー
  169. Simple Image Viewer / クールなアニメーションで切り替わるシンプルイメージメニュー
  170. Horizontal Accordion / 画像チラ見せアコーディオン
  171. CSS3

    css3を使ってるプラグイン

  172. polaroid photo viewer with CSS3 / ポラロイドを動かせるcss3のギャラリー
  173. CSS3 Lightbox Gallery / バラバラに散らばった写真をクリックするとLightboxで拡大
  174. Cufonized Fly-out Menu / クールなアニメーションエフェクトのフライアウトメニュー
  175. Slide Down Box Menu / マウスオーバーで画像が降り、テキストが上がるクールなメニュー
  176. Pretty Simple Content Slider / キャプションとタイトルのスライドインが素敵なメニュー
  177. ShineTime / マウスオーバー時のエフェクトがかっこいいギャラリー
  178. css3 transition slide / キャプションがクロススライドするシンプルなスライド
  179. Contextual Slideout Tips / クリックでコンテンツがアニメーションしながら広がる
  180. Bubble Navigation / マウスオーバーでサークルが広がり、子メニューが出現
  181. A Fresh Bottom Slide Out Menu / 遅れて出てくるアイコンがキュートなメニュー
  182. Apple-Style Icon Slide Out Navigation / アイコンが降りて来て、裏に入っていくメニュー
  183. Little Boxes Menu / バラバラになるアニメーションがユニークなボックスタイプのメニュー
  184. Slide Out Navigation / アイコンの出方が可愛いスライドサイドメニュー
  185. Interactive Picture / マウスオーバーでキャプションがスライド、クリックで画像が上がってくる
  186. Thumbnails Navigation Gallery / サムネイルギャラリーを使ったメニュー
  187. Sliding Panel Photo Wall Gallery / 画像を全体に表示、ギャラリー化
  188. Photo Desk / クリックするたびに角度が変わるポラロイドタイプギャラリー
  189. Beautiful Photo Stack Gallery / スライドギャラリーとLightboxをあわせたもの
  190. Image Highlighting and Preview / 少し回りくどいLightbox
  191. Kitchen Table / ギャラリーとLightboxをcss3も使って実装
  192. その他

    そのほかいろいろ

  193. PANORAMA VIEWER / 360度ビューアを実現するライブラリ
  194. VIRTUAL TOUR / パノラマビューアにキャプション機能を追加
  195. Create a Resizable Image Grid / バーのドラッグで全ての画像のサイズを変更
  196. imgAreaSelect / 画像の範囲をドラッグで指定、位置やサイズを表示
  197. Jcrop / 画像の範囲を指定して切り取る
  198. gzoom / バーのドラッグで拡大縮小
  199. Image Upload And Crop / PHPを使って、アップロード&切り取り可能なコンテンツに
  200. PhotoShoot / 画像内の一部を撮って写真内に収める
  201. Image Flip / クリックするとフリップする
  202. jQuery Corner / 角丸を作る。画像も角丸に
  203. jQSlickWrap / 画像の形状に合わせてテキストを詰める
  204. Image Reflection / 画像にリフレクション効果を与える
  205. jcoverflip / 画像をスクロールバーで動かす際に拡大アニメーション
  206. ANIMATED INNERFADE / 画像が自動でボックス内で斜めに動いたりする
  207. jThumb / 画像をサムネイル化する
  208. It’s a Rainbow! / 背景の画像の色が七色に変化
  209. Page Peel Effect / 角にめくれをつくる
  210. QuickFlip / クリックでフリップするコンテンツ。背景に画像しても可
  211. 以上、224個の画像系jQueryプラグインでした。