READ MORE

WindowsXPのサポートも終了し、この先はWebサイト制作においてIE8を対象外にできる状況が増えることが想定されCSS3の各機能を今まで以上に活用できる機会が増えてくるかと思います。そんな中、最近あちこちで話題になっていた複雑なCSS3アニメーションエフェクトを簡単に実装することが扱うことが可能になる「iHove…

READ MORE

レスポンシブレイアウトで構築したWebページの場合、閲覧している画面サイズによってレイアウトが最適化される構成になるのでPC用レイアウトとスマートフォン用レイアウトを任意で切り替えることは出来ないものだと思っていたのですがjQuery等を使ってmetaの「viewport」を切り替えることによってスマートフォンでもPC…

READ MORE

今までもハイクオリティなフリーアイコン素材など何度か紹介してきましたが、フラットなものやロングシャドウ等々、様々な種類の中からデザインを選択しとても簡単にカスタマイズしながらアイコンを作成することができるツール「Iconion : Free Icon Maker」がとても便利だったので自分用メモとして紹介してみます。様…

READ MORE

最近Webサイト上のUIにおいて、マウスホイールイベントを使って処理する機会が多くありその都度「jquery.mousewheel.js」などのプラグインを使って処理していたのですがjQueryファイルのみでマウスホイール上下イベントの取得方法を掲載している記事を見つけ自分でもいろいろと試してみたので実験内容と併せて紹…

READ MORE

先日、AllAboutさんの記事でWebページ上のテキストに対して「1文字ずつ色を変えるなど、文字単位で装飾する方法 [ホームページ作成] All About」と題したjQuery+CSS3を使って1文字ずつ装飾を変える方法を解説していましたがこれをCSS3未対応ブラウザでも実装できるようにjQueryのみで文字単体に…

READ MORE

Facebook上にWebページをシェアした際に表示されるOGP画像。最近では様々な表示パターンがあり実際にどう表示されるか、画像を作成する際に悩みどころだったりします。そんな際にFacebook上でOGP画像がどう表示されるかブラウザ上でシミュレートできるサービス「og:image Simulator」がこの先便利に…

READ MORE

パララックスサイトやAppleのプロダクトページの様な動きを付ける為のスクロールして特定の位置でアニメーション等の処理を実行させることができるjQueryプラグイン等をここでも何度か紹介しましたがプラグインのバージョンによって動作仕様が変わってしまっていたり上からのスクロールと、下からのスクロールの判断が微妙だったりし…

READ MORE

jQueryを使ってのレスポンシブに対応したスライドショーを実装するいくつかのパターンを紹介してきましたが、サムネイルも何もなしでただ画像(コンテンツ要素)がクロスフェードするだけのシンプルなスライドショーのレスポンシブに対応したパターンの要望を多くいただいたので試しに作ってみたのを紹介してみます。jQueryでレスポ…

READ MORE

Webページ上のテキストや数値を表示する演出でスロットマシンの様な回転アニメーションの必要性に駆られた事がこれまでに何度かありその度に苦労していたのですがとても簡単に同様のアニメーションを実装することができるスクリプトがあったので自分用メモとして紹介してみます。Odometer - Transition numbers…

READ MORE

以前に「jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験」と題して「もっと見る」ボタンで画像を次々と読み込ますUIを紹介しましたがそこで紹介したスクリプトでは連番で構成している画像要素のみの追加だったので「jQueryでページ最下部までスクロールした際に外部HTML(JSON形式)化した要素を追加する…

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