Category : jQuery

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

マウスホイールを使ってスクロールした際に縦にスクロールするのではなく、画面全体を横(水平)にスクロールさせることでページ全体に流れるような演出を加えているWebサイトを最近よく見かけます。そんなマウスホイールでの横スクロールに加えてページ上の要素をレイヤー状に重ね合わせて、奥行のあるパララックス効果もつけてスクロールさ…

READ MORE

少し前に「jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法」と題して、スマートフォン向けレイアウト時ではメニューをアコーディオン動作で展開するレスポンシブナビゲーションUIを紹介しました。レスポンシブナビゲーションUIのパターンとしてはアコーディオン動作ではなくハンバーガーメニューボタン…

READ MORE

この度「プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート」というタイトルにて本の執筆をさせていただき、2016年2月10日にSBクリエイティブ社さまから出版させていただくことになりました。プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート著者:矢次悟郎価格:24…

READ MORE

レスポンシブサイトでメニュー等のナビゲーションを扱う際、PC向けレイアウト時にはボタンをページ上に並べ、スマートフォン向けレイアウト時にはボタン一式を折りたたんでハンバーガーボタンでメニューを開閉させるUIにすることでスマートフォン向けの画面でもナビゲーションをコンパクトに扱えるUI技法があります。そんなレスポンシブ対…

READ MORE

レスポンシブWebデザインでのサイト構築において、PCのような大きな解像度の画面向けの場合ではタブ切り替えで実装しているUIをスマートフォン向けの小さめの解像度の画面ではアコーディオン方式のUIに切り替える動作を見かけることがあります。それぞれの画面解像度によって最適なUIに切り替える手段になりますがそんなレスポンシブ…

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR