Parallax Scrolling Scripts and Plugins | Impressive Webs パララックス効果を作るスクリプトやプラグインのまとめ。 最近では国内でもちらほら見かけるようになったパララックスなデザイン。 一言にパララックスといっても色々な実装があり、どれも斬新なものになっていて、見ておくだけでも参考になるであろう物が満載 こういう今では真新しいような技術も数年後には新しいテクニックが出てきていて、陳腐化したり応用されて汎用的なものになったりと今後も技術の進歩が楽しみですね 関連エントリ パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル＆サンプルDL

jQuery Spectragram Instagramから写真を取ってきて表示できるjQueryプラグイン「jQuery Spectragram」。 APIをJS経由で叩いて、タグ、ポピュラー、指定ユーザの写真をフェッチしてページに表示することが出来るようになります。 APIを使うためDevTokenとClientIDが必要になります 自分の撮った写真をサイト上にお手軽に表示したい場合に使えそうです 関連エントリ 画像をアップしてInstagram風エフェクト等様々な編集も可能なBootstrapベースのアプロダ「Filepicker.io」 PHPでInstagram風に画像フィルタをかけられるクラスライブラリ

45 Examples Of Websites Designed With HTML5 | Free and Useful Online Resources for Designers and Developers これは必見のWEBデザインの近未来。HTML5で構築されたサイト45 CSS3なんかも取り入れてデザインは去ることながら、動きもいい感じに実装されています。 WEB業界に身を置く方ならばデザイナーならずとも、出来ることを知っておくという意味で必見のサイトが多数。 多くのプロフェッショナルなサイトにおいてこうした物が近い未来当たり前になっていきそうな予感。 今後、より多くの知識と動かし方に関する引き出しを身に付けた上でクリエイティブな仕事が求められそうで大変な反面、面白いことにもチャレンジできそうな可能性を感じます。 ソニーのタブレットのサイト。超カッコいいです 他にも多数の動き

turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」

複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」 2012年02月21日- Sequence.js - The jQuery Slider Plugin with Infinite Style 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」。 スライダーというと通常１個の画像とかですが、複数の要素を個別にアニメーションさせてダイナミックな表現が可能になります。 AppleのiPhone詳細サイトみたく、画像を回転させたりして超カッコよくプロモーションさせることもできます とにかくメチャクチャかっこいいので、一度見ておいたほうがいいと思います 素材の用意は大変ですが、それに見合ったものができるはず 関連エントリ レスポンシブなjQueryスライダー実装プラグイン８個 パララッ

Glisse.js - a simple, responsive and fully customizable jQuery photo viewer レスポンシブなPhotoギャラリーを作成できるCSS3＆jQueryな「Glisse.js」 デザイン性に嫌味がなく色々な場所で使えそうです。画像を送った際のアニメーションが選べるのもいい感じです ギャラリーページ 拡大 レスポンシブ レスポンシブが発明されなかったらどんな感じになってるんだろうっていう気がしますが、頭の良い人がいるもんですね。 そういう発明をしてみたいものです 関連エントリ 秀逸なレスポンシブWEBデザイン50のサンプル レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretcher」 レスポンシブなjQueryスライダー実装プラグイン８個

4 Fun CSS Image Effects You Can Copy and Paste | Design Shack CSSだけで画像をシャレオツにしてしまう４つのエフェクトサンプルコード。 次のように、画像を一瞬にしてオシャレにするCSSコード例が紹介されています。 数年前に同じような事を画像編集ソフトでやっていた人がいそうですが、もう一瞬でCSSでできる時代ですよ奥さん、という声が聞こえてきますね 数年後には、もう正直どうやってやってるかわからないけどライブラリ使ったらこうなった的なブラックボックスにどんどんなっていくんでしょうね 関連エントリ HTMLをアップするとCSSのスケルトンを自動生成してくれる「bearcss」 facebookのタイムラインをjQueryとCSSで作るチュートリアル Youtubeのカーソルを合わせるとポップアップするボタン実装CSSサンプル シンプ

Parallax Slider with jQuery パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル＆サンプルDL スライダーの背景がパララックスを利用していて画像が切り替わる際に奥行きが表現されるというものです。 サンプルのUIも超カッコいいのですが、画像が切り替わった時の奥行き感が素晴らしい。 ちょっと古い記事なんですが、知らなかったのでご紹介です デモはこちら パララックス効果を導入してみたいという方にはいいチュートリアルにもなります 関連エントリ 並べた画像を敷き詰めて超カッコよくするjQueryサンプル 円形で回転するタイマーを実装できるjQueryサンプル 良い感じで動作するニュースティッカー実装jQueryサンプル

NoiseGen Demo 背景画像を使わず動的に背景模様を描画できるjQueryプラグイン「NoiseGen」。 次のような模様を$(element).noiseGen(options); のように呼び出すだけで描画できるプラグインです。 パラメータをいじることでパターン画像を変更できるあたりがなかなか面白いです。パラメータを変えてみて遊んでみるのもよさそう それにしてもこういう背景なら画像を使うのが当たり前ですが、JSを使うという発想が素晴らしいですね。 こうした細かなハックが重なって新しいハックが生まれていきそう。 関連エントリ 背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 背景画像に使えるド派手なフリーのベクターイ

Div Linker | jQuery Plugins div全体をクリッカブルにするjQueryプラグイン「DIV LINKER」。 次のようなマークアップがあったとして、この場合は「Link text」部分にしかリンクされません。 <div class="divlinker"> <img src="image.jpg" width="151" height="130" /> <br /> <a href="//www.google.com">Link text</a> </div> そこでこちらのプラグインを使って初期化します <script> $(".divlinker").divlinker(); </script> するとDIV全体がクリックできるようになるというもの。 デモページ HTMLをきれいにかきつつdiv全体を<a>みたいに動かすことができます 関連エントリ RSSやA

Circular Content Carousel with jQuery | Codrops ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル。 そもそものデザインもいいのですが、次のようなコンテンツを左右にスライドできる（ホイールでもOK)UIを作ることが可能です。 「more」をクリックすればそのまま詳細がアニメーションで広がります サンプルプログラムのダウンロードが可能なので、ダウンロードしてカスタマイズして使うだけでも有用です。 関連エントリ IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル ページ上にそのままチュートリアルを乗っけて使い方を分かりやすく説明できるjQueryプラグイン「jQuery Tutorial」

100 Free PSD Files Every Web Designer Should Have - icanbeCreative WEBのデザイナーさんが持っておくと便利そうなPSD素材色々 WEBのレイアウトやパーツに関するPSDファイルが多数紹介されていて、素材として使えそうです。 PSDならレイヤー分けができていたりするものも多いので再利用性が高くて使い勝手がよいですね 関連エントリ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 クールなUIパーツを収録したUI作成用PSDキット「Transparent Glass UI」 色々使えそうなフリーのPSD素材ファイル３０

250 Free Photoshop Brushes 2011 | ZoomZum 便利に使えそうなPhotoshopブラシ２５０種がまとまっていました。 種類は本当に色々でまとまりはないのですが、後々に色々と使えそうなブラシがあっていい感じです。 ちょっとオブジェクトをロゴに配置したいなんて場合にも使えそうです。 雷のブラシとかかっこいいです 関連エントリ 超カッコいいフリーのPhotoshop用アブストラクトブラシ集５２ 動物に関するPhotoshopブラシ色々 女性向けサイト等に使えそうなイラスト風の花・植物のPhotoshopブラシ集 フリーで秀逸なPhotoshopブラシやパターン集いろいろ

Basic Example - jQuery The Final Countdown plugin シャレオツなカウントダウンタイマーが実装できるjQueryプラグイン「The Final Countdown」。 次のようなデザインのカウントダウンタイマーが簡単に実装できるプラグインです。 実装コードも次のように美しい。 関連エントリ ファンシーなデザインのカウントダウンタイマー実装jQueryプラグイン「Fancy Countdown」 画像を使った綺麗なタイマーが実装できるjQueryプラグイン「spriteTimer」

要素にヒント表示したい際に使えそうなポップアップ実装jQueryプラグイン「grumble.js」 2011年07月26日- Grumble.js 要素にヒント表示したい際に使えそうなポップアップ実装jQueryプラグイン「grumble.js」 $('h1').grumble(options) と唱えると、h1要素のとなりに次のようなバブルを表示させることが出来ます。 要素指定なので簡単です。optionsにはアングルや距離等も指定できます。 一定秒数超えたら消すということも出来ます。オレンジ色だけじゃなくて、別の色にすることもできるみたい なんとも注目してしまいそうなポップアップですが、注目させたいポイントに置くとCVRアップなどに貢献できるのかも。 関連エントリ カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 リンクにカー

52 Great Free Abstract Photoshop Brushes 超カッコいいフリーのPhotoshop用アブストラクトブラシ集５２ サンプルを見ているだけで、なんとなくPhotoshopを起動してしまうぐらいカッコイイブラシが色々まとまっています。 これは素晴らしいですね 関連エントリ 動物に関するPhotoshopブラシ色々 クリエイティブでカッコいいPhotoshopブラシセット５０ 女性向けサイト等に使えそうなイラスト風の花・植物のPhotoshopブラシ集 これは覚えておいたほうがいい！というPhotoshopのブラシ５０セット

Got Wood? UI Design Elements | MediaLoot これは斬新！木のUIで訪問者を驚かせよう、なUIパーツ。 木のiPhoneケースや木のキーボード等、木とITを絡めるとなぜかインパクト絶大ですが、木のUIキットを発見しました。 これでページデザインをすれば自然の温かみによってリラックスした気分でページを使えるのかも。 基本的なUIパーツはそろっているので頑張ればページに適用できるはず。 レイヤーに綺麗に分かれているのがいいですね。 見ていてなにか作りたくなりました。 関連エントリ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 モックアップ作成用PhotoshopのUIキット「Soft UI Kit」 ブルーが美しいモダンなＵＩキットPSD 色々と使えそうなフリーのUIエレメントPSD７０種

6 Powerful jQuery Plugins to Create and Enhance Website Layout | Queness レイアウトに関する強力なjQueryプラグイン６つが紹介されていました。 一昔前では不可能では？と思われたような複雑なレイアウトもjQueryを使うことで簡単に実現できます。 ちょっと変わったレイアウトにしたいっていう時に参考にさせてもらいましょう UI.Layout リサイズ可能な複雑なレイアウト作成 Masonry ブロックを新聞みたいにしきつめて表示 jLayout divをならべてその親divのclassにルールにしたがって記述することで複雑なレイアウトが簡単に作れます jQuery pageSlide ページ全体をズラしてアニメーションしながらサイドバーを出すエフェクト jQSlickWrap 画像にあわせて文書をまわりこませられる C

12 extremely helpful Wordpress cheatsheets WordPress関連の役立つチートシート12。 テンプレートの階層や使えるテンプレートタグリスト等、テーマ開発やカスタマイズに使えるものとなっています。 因みに、何ヶ月か前に、WP3の関数フック位置一覧を標準テーマにあわせてWYSIWYGで確認できるものを作ったのですがどこかに行ってしまいました（＾＾；） 比較的簡単に出来たと思うので作っておくとプラグイン開発に便利だと思います。また見つかったら公開したいと思います 関連エントリ WordPressでのページ表示高速化の色々まとめ シンプルなポートフォリオサイト構築用WordPressテーマ25 WordPressにFAQ管理機能を追加するプラグイン「FAQ Manager」 フレッシュなWordPressテーマ１００

jQueyを使う場合に覚えておくと便利なChrome拡張が２つほどありましたのでご紹介。 マニュアルを検索する際にクイックに目的のものにアクセスし、開発スピードを上げられます。 jQuery API Browser ツールバーにボタンを追加してマニュアルをインクリメンタル検索。サンプルコードまでをChrome上で出せます。 インストールするとボタンが表示されます。 インクリメンタル検索が可能。 クリックすればサンプルコードも表示されます。 これは便利。 jQuery API Search 標準の検索窓に「jq ajax」などをタイプすればjqueryのマニュアル検索に飛べます Chrome上でインクリメンタルな検索が可能。 結果はjQueryのサイトにて閲覧 とりあえずどちらかいれておいて損はなさそうです。 関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-