会員登録などの入力フォームでメールアドレスの登録ミスをしないようにメールアドレスの入力欄を入力用、確認用と2つ設けて入力をしてもらうことがあり、この2つの入力欄にメールアドレスを正確に入力してもらうために入力フォーム内でのコピー＆ペーストができないようにする仕様がよくあります。このUIの良し悪しは別として、そのような入…

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

jQueryを使ってのマウス操作の判別処理は「hover」「mouseover」「mousemove」「mouseout」などといったマウスが要素に乗った時や、動いた時、要素から外れた時といったものがありますがマウス動作が止まった時「mousestop」のようなものは存在しません。そんな要素の上でマウス動作が止まった時…

スクロールすることによってサイドカラムに配置しているナビゲーションメニューを画面上部に固定してスクロールに合わせて追従させる動作はよく見かけますがだいたいが画面上部に固定のみ、もしくは画面下部に固定のみ、といったものが多くブラウザウィンドウの高さよりもナビゲーションメニューの高さが大きかった場合にはナビゲーションメニュ…

Webページ上の要素が一定時間の間隔でスライドしてループし続けるカルーセルパネルUI。単純に並べられた要素がスライドするカルーセルはよくありますが並べられた要素の中央に位置する要素のみを拡大表示させるという少し変わった演出を加えたカルーセルパネルUIをjQueryを使って作ってみたので紹介してみます。jQueryで中央…

2016年2月にSBクリエイティブ社さまから出版させていただいた書籍「プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート」が台湾の出版社、旗標出版社股份有限公司 様より翻訳出版の依頼を受け、中国語に翻訳され「外掛OUT! jQuery 高手精技」のタイトルで2017年1月に台湾で出版となりま…

以前に「jQueryで数字をカウントアップしながら表示する方法」と題して、jQueryで数字をカウントアップさせながら表示する方法を紹介しましたが、数字を表示する別パターンとして、ランダムにシャッフルしたアニメーションによって一桁ずつ順々に表示する方法でインパクトを与えることもあります。Webページ上になにかの投票数や…

Webサイト上の要素の動きや操作によってユーザーに「触覚」を生み出すマテリアルデザイン。そんなマテリアルデザインの一種としてボタンをクリックした際に、そのクリックしたポイントから波動を出す動作があります。その動作をjQueryとCSSを使って実装するマテリアルデザイン風ボタンを作ってみたので紹介してみます。マテリアルデ…

Webページ上になにかの実績数や投票数、SNSのシェア数などの数値を表示する際に単純に数字を表示するだけでなく数字がカウントアップするアニメーションをつけることでユニークな見た目でのインパクトある演出で数字を印象づけることができます。そんな数値のカウントアップアニメーションをjQueryを使ってシンプルに実装するサンプ…

5年ほど前にもWebページ上の要素がスライドアニメーションによって流れ続けるループスライダーのスクリプトを紹介しましたがブラウザによってスライド動作を長時間続けると動作が重くなったり、いくつか懸念点があったので、そのような懸念点の改善とスクリプト全体をよりシンプルな構成にしたものを紹介してみます。【横スライドパターン】…