スクロールに応じて要素がアニメーションする、視差効果(パララックス)を取り入れたWebデザイン例とTipsいろいろ 最近ちょくちょく見かけるようになったので調べた事をメモ。スクロールすると、複数要素が、それぞれアニメーションするようなWebデザイン。視差効果を生み出すようなパララックス効果を取り入れたものや、ユニークにアニメーションするものなどなど。2011.07.06 | 11時13分36秒cssやプログラミングjQueryWebデザインインスピレーション
スマフォにも対応・ディスプレイサイズに自動で幅調整するレスポンシブなjQueryイメージスライダー・Blueberry どのようなディスプレイサイズでも自動で レイアウトを調整してくれるレスポンシブな イメージスライダーを実装出来るjQueryプ ラグイン・Blueberryのご紹介です。イメージ スライダーを取り入れているサイトは多い のでこうい...2011.07.05 | 10時31分19秒cssやプログラミングiPhone / iPadjQueryWebデザイン
複数ブックマークサービスに一括対応できるAddThisを導入する前にいろいろ調べたのでメモ ブックマークやTwitterへの投稿、Facebook のいいね!をしやすいようにボタンをサイト側 で設置するのはもはや当たり前のようになり つつあります。僕も例外なく、昔から貼ってる んですが、どんどん新しいのが出てきて、結構 ...2011.07.04 | 10時43分55秒Webサービスその他
制作中のWebサイトにシンプルなグリッドを表示させる制作補助系jQueryプラグイン・Simple Grid 昨日TwitterでもPostしたんですけどやっぱり たまに使いそうなのでメモ。数値を設定する だけで簡単にシンプルなグリッドを重ねる事 が出来るWeb屋さん向けのjQueryプラグイン・ Simple Gridです。いちいち拡張や...2011.07.03 | 11時00分08秒cssやプログラミングjQueryWebデザイン
HTML5で実装する動画コンテンツに字幕を付けるライブラリ・Cuepoint JS なかなかユニークだったのでメモがてら。 HTML5で実装する動画コンテンツに字幕 を加える、というjsライブラリです。思いつき ませんでしたけど、こう言うことも出来てし まうんですね・・・HTML5ってやっぱり凄い かも・・(今さ...2011.07.02 | 14時38分54秒cssやプログラミングWebデザイン動画関連
PC、テレビ、iPadやiPhoneなどマルチデバイス対応のWebアプリケーションを構築する為のオープンソースフレームワーク・JOSHFIRE ちょっと興味深かったので備忘録。 PCは勿論、iPadやiPhoneなど人気 のタッチデバイスから、TVなどなど、 マルチデバイス対応のWebアプリ を構築する為のフレームワークだそう。 オープンソースで配布されています。2011.07.01 | 20時25分41秒オープンソースソフトウェア
お手軽WordPress Tips:1行のコードで追加できる便利な新機能「投稿フォーマット」を使ってみよう WordPress3.2のリリースも間近に控え、 より楽しみが増える今日この頃ですが、 3.1から増えた新機能の投稿フォーマット がさほど普及していない印象が否めない ので微力ながら貢献してみようかなと 思います。2011.07.01 | 10時50分11秒WordPressお手軽カスタマイズカスタマイズ
並べられたアコーディオンパネルを開くと幅が可変して可読性を高める・Jquery Animated Grid 横に並べられたアコーディオンパネル を開くと、幅がアニメーションで広がり つつ、隣のアコーディオンが狭くなる ので、全体のレイアウトを維持できる というプラグイン。幅を気にしなくて いいのは場合によっては助かるかも。2011.06.29 | 15時42分15秒cssやプログラミングjQueryWebデザイン
iOS4.2+ / モバイルSafariの「振る動作(シェイクジェスチャー)」をjQueryを使って検知する iPhoneを振る動作(シェイクジェスチャー) によって呼び出されるモーションイベント をjQueryで検知するgShakeのご紹介。 iOS4.2以上 / Safariでは加速度センサー をJavaScript経由で使うことが出来...2011.06.29 | 10時48分39秒cssやプログラミングiPhone / iPadjQueryWebデザイン
最近よく使ってる、Web制作に役立つWebサービス的なやつ 少し前に聞いてくれた方がいたのでついで にシェアしてみます。個人的に最近よく好ん で使っている、Web制作に役立つWebサー ビスみたいなものをご紹介。全部既出で 珍しいものは無いんですけど、一覧にする のもたまにはいいかもですね...2011.06.28 | 10時58分23秒WebサービスWebツール
Youtube動画を透過(opacity)できるjQueryプラグイン・YTPLAYER あまり見かけないタイプのライブラリだった のでメモ。Youtubeの動画を透過させる事 が出来るjQueryプラグインです。インター フェースもクールにされて全画面に配置した りオート再生させたりも可能でIE6や7でも 一応は動作...2011.06.27 | 10時44分00秒cssやプログラミングjQueryWebデザイン
別々に開いたブラウザ間でエレメントをリアルタイムで交差させるNode.jsアプリのサンプル 日曜日なので軽めのネタ。別々に 開いているブラウザの間で、エレメ ントを交差させるNode.jsアプリが サンプルとして公開されていました。 いろいろ出てきますね・・2011.06.26 | 10時52分24秒その他もろもろプライベート
全画面をダイナミックなイメージギャラリーとして使う事が出来るjQueryプラグイン・JQUERY.MB.BGNDGALLERY 全画面をダイナミックにイメージギャラリー として使えるようにするjQueryプラグイン JQUERY.MB.BGNDGALLERY。同じ ようなライブラリは沢山あるので選択肢 の一つとして覚えておこうかなと思いま す。Flikcr...2011.06.25 | 10時39分47秒cssやプログラミングjQueryWebデザイン
グリッドに配置された画像にマウスオーバーした際に十字ハイライトさせるjQueryプラグイン 個人的に好きなタイプのjQueryの使い方 だったのでメモ。イメージギャラリーは、こ ういったエフェクトも大事な要因ですし、 参考にしておきたい所です。なかなかイン パクトもあって素敵ですね。尚、グリッドは Masonryを使って...2011.06.23 | 10時40分13秒cssやプログラミングjQueryWebデザイン
CSS Regionsのように雑誌のような複雑なレイアウトを組めるライブラリ・Regions.js 雑誌のような複雑なレイアウトをWebや 電子書籍でも組めるようにしよう、という 目的(かどうか分からないけど)で先日 W3Cで公開されたCSS Regionsをjsで 実装しよう、というもの。cssオンリーだと まだまだ時間かかり...2011.06.22 | 10時25分22秒cssやプログラミングWebデザイン
接続をセキュアにしているFBユーザーの離脱を避ける為にFacebookページをhttpsでアクセス出来るように設定する 僕も最近指摘を受けて対応したのですが、 アカウントのセキュリティをセキュア接続 にしているユーザーだと、普通のFacebook ページにアクセスした際に、ユーザーが 一旦解除しなくてはなりません。面倒だし、 割と離脱率高い気もする...2011.06.18 | 10時53分07秒Webサービスその他
お手軽WordPress Tips:管理画面での画像アップロード等に使われているlightboxを他の用途でも利用する 投稿やページで画像等のメディアをアップ ロードする際に使われてるlightboxを他でも 利用するというのが今日のWordPress tips です。さほど使う機会は無いでしょうけど、 まぁ知っておくと役に立つんじゃないかな・・ ...2011.06.17 | 11時03分46秒WordPressお手軽カスタマイズカスタマイズ
画像を使わず、CSS+jQueryで絵文字を作れる・JQuery CSS Emoticonsがちょっと素敵だw これはちょっと面白いw画像を使わず、cssとjQueryだけで顔文字を作ってしまったみたいです。発想が単純だったのでうまく応用出来れば楽しいものが出来あがりそうな予感もしますな。面白い事考える人がいますね・・w2011.06.15 | 10時36分15秒cssやプログラミングjQueryWebデザイン
jQueryMobileでリアルタイムなフォームバリデーションを使う jQueryMobileでのフォームバリデー ションに関して調べ物をしたのでメモ。 実装した事が無かったのですが、も しかしたら近いうちに使うかもなので 動作テストしてみました。バリデーシ ョンには他プラグインを使います。2011.06.14 | 20時17分53秒cssやプログラミングiPhone / iPadjQueryWebデザイン
パブリックドメインで配布されている、クロスブラウザ対応を意識したHTML5+css3製のフレームワーク・Gridless いくつも似たようなのはあるのですが、 複数覚えておいて損は無いのでメモ がてらご紹介・・・クロスブラウザ対応 を意識したHTML5+CSS3フレームワ ーク・Gridlessです。装飾を施さない、 とてもシンプルなものになっていま...2011.06.14 | 10時55分04秒cssやプログラミングWebデザイン
HTML5+jQueryのドラッグ&ドロップに対応したアップローダー・droparea Gmailライクにローカル環境からブラウザに ドラッグ&ドロップで画像をアップロード可能 にするHTML5+jQuery製のアップローダー droparea。今後、こうしてキーボードを使う 頻度が減っていくんですかね・・HTML5の...2011.06.11 | 10時40分31秒cssやプログラミングjQueryWebデザイン
フォームのselect要素で複数選択を簡略化できるjQueryプラグイン・jquery.multi-select フォームのselect要素で、直感で複数選択 出来るようにするjQueryプラグイン。複数 選択できるようにしたい場合は多くの場合は 選択項目が多く、Ctrlを使わせるのはあまり ユーザーフレンドリーとは言えませんので、 簡単に選...2011.06.10 | 15時08分48秒cssやプログラミングjQueryWebデザイン