jQueryだけで画像のロールオーバーを実装するjQuery.RollOverの使い方

シンプルにロールオーバーを実装する方法

リンク用途などにおいて画像のロールオーバーはかなり頻繁に利用されていますが、これをシンプルに実現できるようにするプラグインをご紹介。

続きを読む

jQuery Mobileでレストラン評価サイトを作るチュートリアル

20120312 01

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App

jQueryモバイルでレストランの評価サイトを作るデモを見つけたので個人的にメモです。

jQueryモバイルを活用したデザインの参考にしたいと思います。
あくまでフロントエンドの実装なので、バックエンド(情報の登録、保存など)はありません。

続きを読む

スクロールに応じて要素が動く、パララックスを実装できるjQueryプラグイン「scrolldeck」

20120310-01

スクロールによるパララックス効果を実装できるjQueryプラグイン「scrolldeck」

スクロールすると、画像やテキスト、その他色々な要素がアニメーションするWebデザインを最近良く見かけます。

パララックス(視差効果)や細かなアニメーションするものまで、様々なものがあると思いますが、
本日紹介する「scrolldeck」を使用するとパララックス効果を簡単に実装できるようになります。

パララックスがどんなものか分からない方のために先にプラグインのデモリンクを貼っておきます。

デモ1

デモ2

デモ3

スクロールで画像がずれて行く感じがたまらないですね。

続きを読む

TextMateの設定メモ

Macのテキストエディタ TextMateの設定メモ

TextMate

本日Macの新しい環境を作る事になり、TextMateのプラグイン設定をしたのですが
忘れないように自分用にメモです。
誰かのお役に立てれば幸いです。

続きを読む

スマートフォンサイト開発に使える!Tipsやフレームワークのまとめサイト「Mobile Tuxedo」

スマートフォンサイト開発に使えるTipsやUIデザイン・フレームワークのまとめサイト

20120222 01

Mobile Tuxedo」はすスマートフォン開発者さんならRSS購読がおすすめです。

続きを読む

デザイナーの英知が結集されたフリーのUI/アイコン/テンプレートセット

20120220-09

Box of Bundles」は世界中の素晴らしいデザイナーが作成したUIやアイコンを無料でダウンロード出来るサイトです。

60以上のUI要素、アイコン、テンプレート(ウェブサイト、スマートフォン用、HTMLメール用)及びCSS3ボタンの素材が含まれています。

個人および商用利用可能との事なので、自由に使えるのも嬉しいですね。

素材は以下のような物がありました。
いくつか気になったものをご紹介。

続きを読む

詳細なオプション付!ダイアログの表示に使えるjQueryプラグイン「Noty」

20120220

Noty」はダイアログの表示が出来るjQueryプラグインです。

通知は、上下、中央、左上または右上に配置することができます。

テキスト、アニメーション、速度、ボタンをカスタマイズするためのAPIが数多く用意されており、詳細なオプション指定が可能です。

続きを読む

モダンなスライドショーを作れるjQueryプラグイン「Sequence」

20120220 01

モダンなスライドショーを作れるjQueryプラグイン「Sequence」

Sequence」はスライドの仕方に特徴があるjQueryプラグインです。
写真1枚をただスライドするのではなく、複数の写真を配置してモーションに動きをつける事が出来るようになります。

見た方が早いので、こちらのデモを見てください。

HTMLのマークアップはliタグの中にHTMlを書いていくようになっているので、
簡単に構築が可能です。

タッチ操作にも対応しているので、iPhone/Androidでも操作が可能です。

続きを読む

画像の内側にボーダーを付ける方法!CSSだけ!

CSSでボーダーを画像の内側につける

マウスオーバーした際に、ボーダー処理をCSSでつける作業をしていた所、
画像の内側にもボーダーをつけたいと言われてやり方を調べました。

誰かの参考なれば幸いです。

Inner Border on Rollover
↑このような状態が理想です。

結論を言うと、画像にネガティブマージンを適用すればOKのようです。

続きを読む

CSSでカスタマイズ可能なフォトビューア「Glisse.js」

CSS3のキーフレームアニメーションで構成されたフォトビューア

Glisse js  a simple responsive and fully customizable jQuery photo viewer

Glisse.js」はCSSでデザインカスタマイズが可能フォトビューアです。

CSS3の機能がブラウザによっては変わってしまうためIE8などで動作しないのですが
面白そうだったのでご紹介。

続きを読む