知的?自己流?普利伊待夢な育児ブログ

複数のパネルを順番に表示するウィザード形式のコンテンツを実装するJavaScript「Smart Wizard」を紹介したいと思います。インストールとかに良くある「次へ」「次へ」「完了」みたいなモノをWEBページ内に実装するようなイメージです。サンプルキャプチャは以下の通りです。


実際に動作するデモは以下をご覧ください。
Smart Wizard　Demo

実装やTipsなどについては続きを参照ください。

CSSだけで実装したパララックス（視差）効果を発見しましたので、紹介したいと思います。JavaScriptやFlashをまったく利用せずにhtml/cssだけで実装しているのが驚きです。というか、CSSでこんなことができるなんて知りもしませんでした。

実際に動くものを見ていただければ凄さがわかります。
CSS 3D Meninas

上記ページにアクセスし、メイン画像の上にマウスを置いて左右にカーソルを移動してみてください。背景が実際に動きますので驚きです。

デザインも綺麗かつ、ユーザビリティに配慮して大量のサブメニュー項目を掲載するドロップダウン型のナビゲーションを実装するCSSとJavaScriptのTipsを紹介したいと思います。
グローバルナビゲーションにマウスを乗せると、サブメニューが存在する場合、展開することは良く見かけるかと思います。それの項目が多い場合の綺麗に見せる方法になります。

サンプル画像とDemoは以下の通りです。


Demoサイト

実装方法など詳細は続きをご覧ください。

面白い&これから使おうかなぁ?ってサイトの紹介です。
無料で簡単に、顔写真の赤目や肌を綺麗に修整してくれるWebサービスです。

顔写真の修整前（左）と修整後（右）がコレです。結構凄いッΣ(￣Д￣;)!!


もういっこです。


実際に使えるサイトのURLと使い方は続きに載せました。

画像などを配置したパネルをアニメーションでスライドする、シンプルなカルーセルを実装するJavaScriptを紹介したいと思います。非常にシンプルで、html/css/JavaScriptを加えるだけですぐに活用することができます。

サンプルは以下のような感じです。


実際に動くDemoサイトはこちら。
Demoサイト

実装手順などの詳細は続きへ。