ブログ

ブラウザいっぱいに画像を敷き詰めて、
印象を与えるほ法はフルフラッシュのサイトで見かけるテクニックです。
複数のプロパティが用意されており、
引数で指定するだけで効果を変えることが出来ます。

切り替え方法のプロパティ

  1. fade
  2. simpleSlide
  3. superSlide

順番のプロパティ

  1. normal
  2. random
  3. back

切り替える方向のプロパティ

  1. N
  2. S
  3. W
  4. E
  5. NW
  6. NE
  7. SW
  8. SE

参考サイト ⇒ bgstretcher-2

WEBページを表示させるためには、
ブラウザがHTMLファイルを読み込み、
上から順番に実行して行きます。
1ページ内に含まれている画像ファイルが多い場合や、
読み込むファイルが重い場合、
表示されるまでに時間が必要になります。
ならば、表示されていない画像は読み込みを行わず、
スクロールして表示される瞬間に読み込むようにするべきです。

使用サンプル → 時間差読み込み

参考サイト ⇒ Lazy Load Plugin for jQuery

表現技法に対して複数のプロパティが用意されており、
アニメーションのスピードや、
プレイ時間を引数で指定することで切り替えることができます。
また、属性で指定しておけば、スライドインさせることも可能です。

  1. random
  2. boxRandom
  3. sliceUpDown
  4. fade

参考サイト ⇒ nivo-slider

メニューボタンをクリックしてページ遷移する前に
コンテンツに応じた内容を表示させ、
あらかじめ内容がわかるようにしておくことは。
ユーザー視点から重要なことです。
JavascriptのDOMを使いこなせれば、
自分で実装できますが、プラグイン化されており、
読み込むだけで実装できるほうが相当便利です。

使用サンプル → スライドショーナビ

参考サイト ⇒ desSlideshow

シンプルなスライド式ナビゲーションメニュー。
縦スライド、横スライドどちらも可能。
各コンテンツへのリンクにするだけでなく、
別サイトへリンクさせるリンク集としての使い方もある。

使用サンプル → メニュースライダー

参考サイト ⇒ Design Chemical Lab

一覧表を作ったとき、見やすくする工夫はいくつか考えられています。
1つ目に、jQueryやcss3を使って、偶数行と奇数行を色分けするストライプテーブルの方法。
また、値の大小によって背景色を変更することで、
温度分布図にすることで見やすい表にする方法もあります。
何色系にするかは、RGBの数値を指定しておくだけ。

使用サンプル → ヒートマップ

参考サイト ⇒ Design Chemical Lab

通常のカルーセルパネルのプラグインは、
単純に並べたコンテンツを一つずつ
スライド切り替えを行うだけです。
しかし、このプラグインは一足飛びに切り替えるとき、
そのコンテンツが隣り合わせに並んでいるように切り替えてくれます。
複数のプロパティが用意されています。

  1. Linking
  2. Standard
  3. Product
  4. Simple

参考サイト ⇒ Slides

グローバルナビゲーションがヘッダー部分にしかないデザインを行ったとき、
1ページが縦に長くなってしまうと、
他ページへの遷移がスクロール⇒メニュークリックと手間になりがちです。
メニューを縦配置にいたり、フッター部にもリンクを設置するなど工夫されていますが、
スクロールしても常に表示されていればそのような心配もなくなります。

使用サンプル → スクロールメニュー

参考サイト ⇒ ScrollingSidebar

通常WEBに使う画像はフルカラーですが、
敢えてグレースケールを使うのも表現方法の一つです。
このプラグインはモノクロイメージ用意することなく、
プラグインがモノクロ変換します。

使用サンプル → モノトーン

参考サイト ⇒ Black and white jQuery plug

新着ニュース、トピックスなど、トップページで
印象付けたいコンテンツは沢山ある。
単純なテキストコンテンツだけで終わらせることなく、
効果的な見せ方をしましょう。

  1. サムネール付き
  2. 縦型メニュー(オートプレイ)
  3. 縦型メニュー(イージング)
  4. ページ数のメニュー
  5. 縦型メニュー(フェード)
  6. 切り替えボタン付き

参考サイト ⇒ The Lof JSiderNews Plugin

 

ブログ

Movable Type
WEB研究所
jQueryライブラリー
WordPress
JavascriptLibrary
jQuery基本構文集
php実験室

WEB研究所

WEB研究所

最近のブログ記事

ナビゲーションメニューにも工夫を
jQueryライブラリーブログ上
可変グリッドレイアウト
jQueryライブラリーブログ上
カラーボックス
jQueryライブラリーブログ上
OpenID対応しています OpenIDについて