[JS]シンプルながら優れモノ！ホバーやクリックでさまざまなツールチップを表示するスクリプト -DarkTooltip
ツールチップ系のスクリプトは数多くありますが、これはなかなか使いやすそう！ トリガーはホバーだけでなくクリックにも対応、HTMLコンテンツの表示にも対応、カスタマイズにも優れており、カラー、サイズ、不透明度、表示方向、アニメーションのさまざまなエフェクト、Confirmからのイベントにも対応しています。 上段はサイズ、中段は方向、下段はアニメーション アニメーションなどの実際の動作はデモページでぜひ試してみてください。 DarkTooltipの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとしてhead内に記述します。 <head> ... <link rel="stylesheet" href="darktooltip.css"> <script src="jquery-1.10.2.min.js"></script> <script
[JS]画像のホバー時の方向によってオーバーレイをスライド表示するスクリプト -SlipHover
デモページ: auto scroll 長いテキストを自動スクロールさせることもできます。 SlipHoverの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.sliphover.min.js"></script> Step 2: HTML 各画像はimg要素で配置しラッパーで内包し、表示するテキストをtitle内に記述します。 <div id="container"> <img src="1.jpg" title="title1" /> <img src="2.jpg" title="title2" /> ... </div> Step 3: JavaScript ラッパーをjQueryの
[JS]着眼点が面白い！スクロールできない状態でキーボードやクリックでスクロールさせるスクリプト -Scrollocue
2番目のパラグラフに移動して、ハイライト表示 Scrollocueの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="js/jquery-2.0.3.js"></script> <script src="js/scrollocue.js"></script> Step 2: HTML スクロールのキューとなるパラグラフを配置し、適用する範囲を指定できるようラッパーで包みます。 適用範囲のラッパー：#container <div id="container"> <h1>Scrollocue</h1> <div class="section meta"> <p>A simple autocue/teleprompter system.</p> <p>Just use the arrows or spacebar t
[JS]ボタンのクリック時にちょっと音をつけたい時に、イベントにサウンドを割り当てるスクリプト -Ion.Sound
ボタンをクリックした時に軽快な音をつけるなど、ページ上のさまざまなイベントにサウンドを割り当てることができるjQueryのプラグインを紹介します。 Ion.Sound Ion.Soundのデモ Ion.Soundの使い方 Ion.Soundのデモ デモはデスクトップはChrome, Firefox, Opera, Safari, IE9+、スマフォの各ブラウザにも対応しています。 デモではあらかじめダウンロードファイルに含まれている15のサウンドをボタンクリックで楽しむことができます。 デモ（14/15）のキャプチャ Ion.Soundの使い方 Step 1: 外部ファイル </body>の上あたりにjquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jque
[JS]テキストにSci-Fi styleのかっこいいアニメーションのエフェクトを与えるスクリプト -Text Effects
ランダムな文字を次々に表示し、一つのテキストを生成するSci-Fi styleのアニメーションのエフェクトを与えるjQueryのプラグインを紹介します。 Text Effects Text Effects -GitHub ※上記のアニメーションgifは軽量化のため、間引いてます。実際はもっと多くの文字列が高速に表示されます。 Text Effectsのデモ Text Effectsの使い方 Text Effectsのデモ テキストのエフェクトにはいくつかのバリエーションがあります。 上記のアニメーションgifのようなシンプルなエフェクトをはじめ、複数のテキストを使ってループで表示したり、逆からテキストを生成するリバースなどがあります。 Text Effectsの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
