Some More Inspiration for Text Input Effects | Codrops テキスト欄にフォーカスが移動した際のアニメーションをありえないぐらい集めたサンプル集。 テキスト入力欄にフォーカスがあたるとラベルがアニメーションしたりといったエフェクトは最近の流行りですが、新しいエフェクトが満載のサンプル集が公開されています。 とにかく一度見ておけばネタとして使うことができそうです。 サイトに実装されたフォームがこんな感じになっていたら、一般の人は驚くと共に、プロが見ても新しい技術を積極的に使っているということでよい印象が得られるのかも。 関連エントリ ドラッグ＆ドロップにまつまるUIデザインのアイデア集 汎用iOS8用アプリアイコン30個セット「Jellycons iOS 8 App Icon Set」

Rotate HTML elements by mouse in JavaScript - Propeller.js html要素をプロペラ風になめらかに回転させるjQueryプラグイン「Propeller.js」 自動で回転させることもできるし、ドラッグ＆ドロップによって回転させて加速度をつけたアニメーションをさせることもできます 汎用性はありませんが、ちょっとしたエフェクトとして使えそうですね 関連エントリ CSS3アニメーションするモーダルダイアログ実装jQueryプラグイン「Block Slide」 CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 読み終わったらスライドアニメーションで他記事に誘導できるjQueryプラグイン「Promo Slide」 アニメーションするプログレスバーで達成度を視覚化できるjQueryプラグイン

jQuery Panorama Viewer by Pete R. | The Pete Design サイト内にパノラマ画像をモダンな感じに読み込めるjQueryプラグイン「Panorama Viewer」。 パノラマ画像をよみこんで、D&Dやスワイプによって動かせるという感じのUIを作れます 実装されたページはなかなかいい感じ 関連エントリ 色々なタイプのスライダーが実装できる「sGlide」 HTML5＆CSS3なレスポンシブなスライダー実装jQueryプラグイン「Slippry」 スライダーの背景もダイナミックに切り替えるクールなスライダ実装jQueryプラグイン「Immersive Slider」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」

jQuery Immersive Slider by Pete R. | The Pete Design スライダーの背景もダイナミックに切り替えるクールなスライダ実装jQueryプラグイン「Immersive Slider」。 単なるスライドだけではなくて、スライドの背景も切り替えてかっこいいエフェクトを出せるプラグインです スライダ部分だけを変更するより迫力がありますね。 ちなみに、背景画像部分の画像も用意する必要があるようです 関連エントリ ハッシュフラグメントでブックマークに対応できるスライダー「Hashslider v2」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 プロダクトを360度回転させられるjQueryプラグイン「Threesixty-slider」 3Dでグルグル回転するインパクト大なスライダー実装jQueryプラグ

fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。

HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111

tiltShift.js - a jQuery plugin using CSS3 filters to replicate the tilt shift effect CSS3でTiltShiftな写真を作れる「tiltShift.js」 写真にミニチュアや一眼風に効果を与えられるTiltShiftですが、CSS3でも実現が可能なようです。 マウスオーバーで徐々にアニメーションしつつTiltShiftがかかったり消したりという効果も実現可能。スクリプトならではの強みですね。 応用すればマウス位置を中心としてぼかし、なんてこともできちゃうのかも CSS3さんパネェっす、ときっと貴方は言ってるはず。 関連エントリ CSS3でブロック要素を折り紙風にたたんだエフェクトを付けられる「oriDomi」 jQueryでフリップエフェクトを使った良プラグインやサンプル集１０ ターミナルに文字を打ってる

Sweet Tooltip a jQuery & CSS3 Tooltips ? Webstuffshare ? Learn and share. The simplest harmony. 可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」 次のような可愛いモダンなデザインのツールチップの実装デモが公開されています。 目立たせたい時や注目してもらいたい場合に使うと効果的ですね。通常のデザインも入っているようなので使い分けられそうです ファイルをDLすればデモのHTMLとCSS, JSが入っているので変更して容易に利用できます 関連エントリ もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 簡単コードで実装＆カスタマイズできるツールチップ実装jQueryプラグイン「Poshy Tip」 シンプルなツールチップ実装ができるj

jQuery jQSlider :: Example Slimple ページ全体に広がるスライドショーを実装できるjQueryプラグイン「jQSlider」 ブラウザを紙芝居っぽくしたスライドショーが作れます。この手のプラグインでは当然ですが、１ファイルのHTML内に全スライドを書けます。 ブラウザ幅が変わっても伸縮するレスポンシブな仕様になっています ブロック要素内にスライドショーを入れ込んだりもできるようです パワーポイント使うよりもちょっとギークっぽいスライドショーライブラリ。 １つの選択肢として使えそう 関連エントリ レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretcher」 フルスクリーン背景がスライドショーになるCSS3サンプル 指定したパスに沿ってテキストが動く斬新スライドショー実装jQueryプラグイン「Scroll Path」 レスポン

tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design Youtube動画をページ背景にするjQueryプラグイン「tubular」 こんなことが出来ちゃうのかという感じですが、ページ背景全体をYoutube動画にできます。 実装は、$('body').tubular('_VKW_M_uVjw','wrapper'); のように、tubular にvideoIDの引数とラッパーのIDを渡せばOK。 背景をクリックで動画にとんじゃいますが、ホスティングしてもらってるわけなのでしょうがないですね。 コンテンツ領域は問題なくクリックできるところがナイスです。 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 時間の入力を楽にすることが出来るjQuer

Fullscreen Background Image Slideshow with CSS3 | Codrops フルスクリーン背景がスライドショーになるCSS3サンプル。 ページ全体の背景がCSS3によってアニメーションされ切り替わるサンプルとチュートリアルが公開されています。 画像・文字が綺麗にクロスフェードしながら切り替わってなかなかカッコいいものがCSS3をベースに構築されていて勉強になりつつ、そのまま使えそうです デモページ ISDNの時代などはページ全体を背景にすることはタブーでしたが回線の高速化で珍しくなくなりましたね。 今後、よりPCのスペックがあがり回線環境がよくなることで未来はもっともっとリッチになっていきそうですね 関連エントリ CSS3のアニメーションサンプル４７ ピュアCSS3でタイピングアニメーションするデモ CSS3で実装された画像スライドショーサンプル C

Portfolio Image Navigation with jQuery | Codrops 上下左右にスライドできるおしゃれな画像ギャラリー作成スクリプト＆チュートリアル 通常ギャラリーというと左右の矢印がついているだけですが、今回紹介するものは上下左右にナビゲーションさせるというものです。 ページ下部にはナビゲーションが付いており、こちらをクリックしても画像が見れます。 上下の位置関係による意味付けをギャラリーにつけることが可能 デモはこちら 関連エントリ PHPソース１個で実現されるクールなWEBギャラリー実装プログラム「Pagemap ImageWall」 立体感がいい感じの３Dギャラリー作成JSチュートリアル CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 CSS3をフル活用した立体的な画像ギャラリー作成デモ

CSS3 PIE: CSS3 decorations for IE IE6-8でもCSS3が使えるようになる「CSS3 PIE」。 非対応ブラウザがあるのでまだCSS3はいいやという方もいると思いますが、CSS3 PIEというhtcライブラリを使うことでCSS3に対応させてしまえます。 角丸、ドロップシャドウ、グラデーションといったプロパティに対応しています。 実装の際には border-radius、box-shadow、border-image等が使えるようになります。 サイト上のすぐに動くデモを動かしてみると、そのクオリティもなかなかのものだと言うことが分かります。 実装も簡単みたいで、PIE.htc をサーバに設置後、behavior に url(/PIE.htc) として設定するだけみたいです。 behavior: url(/PIE.htc); これは楽で便利です。 対応していな

Professor Cloud JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ。 枠内を画像が３Dで回転します。通常こうしたUIを作るにはFlashが多いですが、JavaScriptでやっちゃってます。 クリックすればLightBoxが開きます。 関連エントリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル 高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」

jQuery.popeye 2.0 | an inline lightbox alternative インラインでその場でLightboxできる「jQuery.popeye」というスクリプトがあるみたいです。 画面をグレーにすることなくその場で画像を送れるので、地味ではありますがこういう使い方もいいなという効果を得られます。 動きとしては記事中にある、一見普通の画像。 カーソルを合わせるとナビゲーションが現れ、画像のスライドが表示されます。 微妙に、写真の下にはキャプションが表示され、写真の説明が見れます。 ありそうで、なかったですね。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 画像やページをLightBox風に表示できるThickbox 表示法が新しくセクシーなLightBox「SexyLightBox」

Slot Machine Tabs | CSS-Tricks タブ切り替えでコンテンツがスロットマシンっぽく切り替わるサンプル。 普通はタブをクリックするとパッと画面が切り替わりますが、このサンプルは面白くて内容がアニメーションしながらスロットマシン風にカッコよく切り替わります。 スタイリッシュ度を上げたい方は覚えておくとよいかも。 タブだけじゃなくて、画面切り替えの際にこういうアニメーションしたらそれはそれでカッコ良さそうですね。 関連エントリ わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」 タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」

Coin Slider: jQuery Image Slider Plugin with Unique Effects 画像切り替えがユニークな画像スライダー実装jQueryプラグイン「Coin Slider」。 画像の切替を、タイル状に切り替えたりすることができるみたいです。 jQueryプラグインなので、$(elemen).coinslider メソッドにオプション渡せば動くようになっています。 少し面白い動きを付けたい、という場合にも簡単に実装できるので覚えておくとよいかもしれませんね。 Flashで同じようにやろうとすると１からだと結構面倒そうな気がしますが、このjQueryプラグインを使うことで一瞬で実装できます。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 表示法が新しくセクシーなLightBox「SexyLightBox」

Grid Accordion with jQuery | CSS-Tricks グリッドアコーディオンを新しい情報表示の仕方をjQueryで実現しているデモとサンプルコードが公開されています。 複数のカラムから１列が構成されていて、列の特定カラムをクリックするとそのカラムが拡大しつつ、列自体も拡大されます。 動き自体も面白いのですが、比較テーブルなんかで便利に使えるかもしれませんね。 にゅっ、とjQueryでアニメーションする部分もいいですね。 関連エントリ jQueryでアコーディオン作成のチュートリアル JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」

Build a PHP Twitter Widget | Brenelz Web Design Solutions PHPで次のようなメッセージが流れるTwitterウィジェットを作るチュートリアルとサンプルプログラムのダウンロードが出来るエントリが公開されてます。 文字が以下のようなUI内を次々と流れます。 左、右ボタンでメッセージを送る機能なんかも地味についてます。 CSS変更でレイアウトの変更も可能のようです。 また、キャッシュ機能も効いているみたいです。 関連エントリ PHPからTwitterに投稿するサンプルコード＆サンプルアプリ PHPとCSSを活用して綺麗にTwitterメッセージを埋め込むサンプル シンプルなTwitter検索を行うためのPHPスクリプト

Ultimate guide to table UI patterns 秀逸なテーブルデザインのパターン集をまとめたエントリのご紹介です。 デザインだけでなく、見やすさや分かりやすさという点にも気を配りたいテーブルデザインは比較的難しいものになりますね。 テーブルデザインの例を知っておくことで、難しいテーブルのデザインをする際にも参考に出来そうです。 Apple のデザインっぽいテーブル 複雑なデータをわかりやすくスタイリッシュにまとめたテーブル 画像なども盛り込みつつ見やすいテーブル シンプルに見やすいテーブル JavaScript の入ったものも入ってきますが色々なテーブルを見てストックしておくと後に役立ちそうです。 関連エントリ CSSでデザインしたクールなテーブルのサンプル集 CSSでデザインされたテーブルレスでクールなフォームサンプル