ScrollHintの使い方
JSのライブラリ「ScrollHint」を実際に使って
様々なオプションやカスタマイズで表示しているサンプルをご確認いただけます。
ScrollHintを使った表示（デフォルト状態）
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
|---|---|---|---|---|
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
5秒後にアイコンが消える設定
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
|---|---|---|---|---|
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
アイコン下のテキストを変更
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
|---|---|---|---|---|
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
アイコン下のテキストを変更＆CSSで拡張
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
|---|---|---|---|---|
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
スクロールしたテーブルの左右にシャドウを付ける
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
|---|---|---|---|---|
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
左右にシャドウを最初から付ける
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
|---|---|---|---|---|
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
アイコンを白背景にする
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
|---|---|---|---|---|
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
サイズを大きくしてカラーも変更したサンプル
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
|---|---|---|---|---|
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |
| THの見出し | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト | テキストテキストテキストテキスト |