以前「jQueryでマウス動作がストップした時を判別して処理する方法」と題してjQueryでマウス動作がストップした時を判別して処理する方法を紹介しましたがそれを利用してドロップダウンメニューのロールオーバー動作をマウス動作がストップしたときに発動させるUI改善について紹介してみます。jQueryでマウス動作が止まった…

古いIEのバージョンのサポートが終了したことやプログレッシブエンハンスメントの考えから、CSS3を使ってのレイアウトやアニメーションを気兼ねなく使えるようになってきました。画像やボタンにロールオーバーした際にCSSアニメーションを使ってのさまざまな演出方法についてまとめているサイトも多々あります。そんなCSSロールオー…

CSS3でのアニメーションやエフェクトなど、サンプル＆チュートリアルはいろいろ増えていますが、ロールオーバーで他とは違ったおもしろい動きをつけているCSS3アニメーションサンプルを２つほど紹介。Space CaCSS - Animated CSS3 background patterns≫Space CaCSS - A…

Webサイト上で重要な役割を持つナビゲーションメニュー。ページデザインをする上で、ボタン素材のテンプレート集などは良くありますが、ナビゲーション全体のデザインテンプレートを36種類まとめたエントリー「36 Best Menu Designs Template」が参考になりそうなデザインがたくさんあったのでご紹介。36 …

CSSの指定で要素にマウスオーバーした際に色を変えたり、背景色を変えたり、何かアクションを付けることに使用する「:hover」要素。本来この指定はマウスオーバーしている要素のみに効果を利かすものですがマウスオーバーした要素の兄弟要素に対しても「:hover」の効果を付けることを可能とするチュートリアル「Hover on…

今では画像のイメージビューアーとしてのjQueryプラグインは多々あります。最近よく見かけるもので、画像をクリックもしくはロールオーバーすることで周りのレイアウトは保持したままで画像のみがその場で拡大表示されるエフェクト。画像の見せ方としてちょっと興味があったのでプラグインを使わず実際にスクリプトを組んで実装する方法を…

昨年（2010年）に、サイト制作で役立ちそうなjQueryプラグインをまとめて紹介している記事を、自分用にメモっていたものが、まとまりきらなくなってきたので、ここに一部まとめて紹介してみます。jQueryを使ってサイトに華やかな演出を加えたり、UIを勉強するために役立ちそうなサイト（ブログ）のまとめ。60 Useful…

先日のCSS（CSS3）のみでスライド画像ギャラリーを作る方法に引き続き、CSS（CSS3）のみで形成する、画像にマウスオーバーで拡大エフェクトをつけるギャラリー的なもののサンプルを紹介してみます。初めに完成サンプルから。※動作環境は前回同様にWebkitブラウザのSafariやChromeのみです。CSS3 HOVE…

サイト内でのナビゲーションメニュー構成は特に重要視しなければいけないところ。見せ方から配置位置までユーザビリティを考慮したナビゲーション構成になることが望まれます。そんなナビゲーションメニューをjQueryを使って演出するチュートリアルを26パターンまとめた「26 Useful jQuery Navigation Me…

CSSのみでアニメーション動作を可能とするCSS3の機能Transition。海外のサイトではもうすでにCSS3アニメーションを実装しているサイトを見かけることもちらほら。そんなCSS3アニメーションのテクニックを紹介しているサイトは多く見かけますが、ここではCSS3アニメーションを実行させるタイミングに関してサンプル…