パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
jScrollPane - cross browser styleable scrollbars with jQuery and CSS
jScrollPane - cross browser styleable scrollbars with jQuery and CSS jScrollPane is a cross-browser jQuery plugin by Kelvin Luck which converts a browser's default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS. jScrollPane is designed to be flexible but very easy to use. After you have downloaded and included the relevant fil
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
[JS]ページのレイアウトに役立つjQueryのプラグインのまとめ
Pinterestのようにパネルを隙間なくレンガ状に配置したり、異なる高さのパネルを同じ高さにしたりなど、ページのレイアウトに役立つjQueryのプラグインを紹介します。
[JS]iPhone, iPad対応、パネルを雑誌のようにぺらっとめくるスクリプト -FlipPage
FlipPage 右端がぺらっとしてますが、キャプチャだと分かりにくいですね。 [ad#ad-2] FlipPageの実装 HTML 画像を配置したdiv要素をdiv要素で内包します。 <div id="exemples"> <div><img src="img1.jpg" style="margin-left: 0px;" /></div> <div><img src="img1.jpg" style="margin-left: -250px;" /></div> <div><img src="img2.jpg" style="margin-left: 0px;" /></div> <div><img src="img2.jpg" style="margin-left: -250px;" /></div> <div><img src="img3.jpg" style="margin-le
実例から学ぶ、CSS3とjQueryを併用する際の切り分け方法
CSS3でもjQueryでも実装できるシャッターのようにスライドするエフェクトを例に、CSS3とjQueryを併用し切り分けて実装する方法を紹介します。 Garage Door Style Menu デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 マークアップとスタイリング jQuery Method CSS3 Method CSS3とjQueryの併用 -Modernizr マークアップとスタイリング HTML HTMLはクリーンでセマンティックに実装されています。 <ul id="garagedoor"> <li id="shutter1"><a href="#1">Link 1</a></li> <li id="shutter2"><a href="#2">Link 2</a></li> <li id="shutter3"><a href="#3">Link 3
HTML5, CSS3, jQueryを使用したフロントエンド開発用のフレームワーク -G5 Framework
CSSのキャッシュ対策 クロスブラウザ対応の角丸、ボックスシャドウ、不透明 ショートハンドCSS、再利用可能なclass ページ下部に固定表示されるSticky Footer CSS（Reset関連） リセットはHTML5ベースのEric Meyer's Reset Reloaded フォントのノーマライゼーション Webkit系ブラウザのフォントのスムージング フォーススクロールバー ラベルの一列化 クリック可能なインプット要素 スクリーンリーダー対応 IE7のイメージリサイジング 印刷時のスタイル X(HTML) クリーンなコード構造 コンテンツ幅は940px F型レイアウト 古いバージョンのIEからイメージツールバーの削除 最新のIEのレンダリングエンジン jQuey 1.5.2ベース（1.4.4も可） ページ上部へスムーズにスクロール HTML5のプレースホルダー機能 ナビゲーショ
複雑な可変カラムレイアウトを簡単に実現する「jQuery Masonry」 | バシャログ。
Arai の新しいオープンフェイスヘルメット、欲しいんだけど XXL がラインナップされてない… 頭のサイズが XXL ですみません。sakai です。 今回は、複雑なカラムレイアウトを簡単に実現することができる ｊQuery プラグインのご紹介です。 jQuery Masonry jQuery Masonry は CSS だけでは実現が難しい、可変かつ複雑なカラムレイアウトを実現することができるプラグインです。 説明が難しいのですが、上記のサイトに行って、ブラウザのサイズをグリグリ入れ替えてみていただくと、このプラグインの機能をわかっていただけるかと思います。 ちょっと前（去年？）に話題になったみたいなのですが、完全に見逃していました。 デモを見て「おおぉー！」と思わず声を上げてしまいました。これ凄いですよね。
デザイナー・デベロッパーのためのjQueryプラグイン30 – creamu
jQueryを使ってクールなインターフェースを実装したい。 そんなときにおすすめなのが、「30 Useful Jquery Plugins For Developer & Designer」。デザイナー・デベロッパーのためのjQueryプラグイン集です。 結構いい感じのものが揃っています。 YoxView – jQuery image viewer plugin 動きの軽快なlightbox系プラグイン Exposure Jquery Plugin かっこいい見せ方ができる画像ビューア jQuery Constant Footer フッタをブラウザ下部に固定配置するためのスクリプト。RSSを読み込んだりもできる ezMark jQuery Plugin チェックボックス、ラジオボタンをかわいいデザインに 変更できるプラグイン Cloud Zoom これはすごい気がする。画像の一部を拡大して
jQueryを使ったストレッチする背景画像 – creamu
背景に大きくビジュアルを使いたい。 そんなときに参考になるのが、『Image Now』。jQueryを使った、背景画像がストレッチするサイトです。 jquery.backstretch.jsが使われていて、width:1024pxの画像が、ブラウザサイズに合わせて伸縮しますね。Flashサイトでなくてもこれができるのはいい感じ。 画像がランダムに切り替わるんですが、それはfunctionでJavaScriptが書かれています。 デザインも設計もクールなサイトなので、一度見てみてください。 Image Now LADの新作のレザーバッグを購入。前のが破れてしまって新しいのがほしかったので、ちょうどいいのが見つかっていい感じ。ふとボッテガ ヴェネタのも気になって見に行ったんだけど、結構するしまだいいかな、と見送りました。でもデザインも質もものすごくいいですね。 あとFenderロゴ入りの帽子も
[JS]よく使う機能だけに絞り込んだ、シンプルなカルーセルのスクリプト -bxCarousel
画像をはじめさまざまなHTML要素をスライド表示させるカルーセルのスクリプトを紹介します。 下記のデモでは、Example One（表示数4、移動数2、手動操作）、Example Two（表示数3、移動数1、自動操作）となっています。
ページ内リンク用のスムーズナビゲーションを作成できる「jQuery One Page Navigation Plugin」
ページ内リンク用のスムーズナビゲーションを作成できる「jQuery One Page Navigation Plugin」 JavaScript Library Archive ページ内リンク用のスムーズナビゲーションを作成できる「jQuery One Page Navigation Plugin」 Check Tweet 配布元:jQuery One Page Navigation Plugin jQuery One Page Navigation Pluginはページ内リンクナビゲーションをスムーズスクロールに変換することが出来るJavaScriptライブラリです。jQuery ScrollTo plugin.を合わせて利用することで柔軟性の高いスクロールを実装しています。 利用方法 jQueryとQuery ScrollTo pluginそして、ダウンロードした「jquery.nav
Web-ContentsSketch：ウェブを中心にデザイン活動している人の日々の記録 【jQueryでブロック要素の高さを揃えるプラグイン「fixHeight.js」と「jquery.flatheights.js」など。】
WEBデザイナーとして日々感じたこと、思ったこと。 写真、絵、デザイン、WEB、インタラクションなことがらについて。 フットサル／サッカーの話題なども。 ブロック要素の高さをそろえたい！というクライアントさんとか結構多かったり、 可変のブロック要素で高さを合わせたいというDTP系なディレクタさんも結構います。 という訳で、この「高さをそろえる」という要望に対してCSSやJSを使った表現がいろいろある訳ですが、私はjavascriptで対応しています。 CSSの方が実装に難易度が高い感じであることと、後付けで実装の手間を考えると、JSの方がだいぶ易しい感じ。 ちなみに最初に実装したのは ●ブロックレベル要素の高さを揃えるheightLine.js[to-R] の記事にあるheightLine.js。 記念すべき？最初の高さを合わせるJSだったような気がします。 で、最近、要素の高さをそろえる
積極的に取り入れたい9つのCSS3（+jQuery）テクニック
CSS3（+jQuery）を使った、ちょっといいかも！と思うエフェクトを集めてみました。 まだまだ非対応ブラウザが多い CSS3 ですが、できるだけ積極的に使ってみたいなーとも思ってます。 まずはいろいろ試してみることからはじめてみましょう！ CSS3 の登場で、いろんな CSS のトリックを使ったエフェクトが考えられてます。まだまだ CSS3 に非対応のブラウザも多いので、全てを CSS3 で表現する訳にはいかないのが現状ですが、私的には積極的にどんどん取り入れていきたいなーとも思ってます。 海外ブログなどで、色んな CSS3 を使った Tips が紹介されているので、その中からいくつかご紹介します。どれもサンプルを作って試してみたものばかりです。以下の環境で動作確認もしています。 Mac : firefox、Safari、Chrome Win : firefox、IE8、Safari、
Best jQuery Tutorial Websites - SaveDelete
jQuery is a JavaScript library which works on cross-browser ( multi -browser ) to beautify and simplify user experience in web designing. Developed in Jan 2006 at NYC by John Resig it is now the most popular JavaScript library which is being used today in web design arena. Its so popular status is due to its free, open source culture which has made it possible to create awesome animations, handlin
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブログ
http://blog.e-riverstyle.com/2010/11/rssjqueryzrssfeed.html
IDEA * IDEA
60 Web Design Galleries for Design Inspiration « AcrisDesign – Web Design Resources and Inspiration
