HTML5ベースのクールな音楽プレイヤーをサイトに埋め込める「SoundManager... 次の記事 ≫：円形で範囲選択の入力を可能にすることができる「jQuery-Lcn-Circle-Range-Se...

Freebie: Organic Food Icon Set | Codrops オーガニックフードの30個のピクトグラムアイコンセット。 食べ物に特化していて、グルメや料理等、そっち系のサイトで使うことができそう 関連エントリ selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」 306種類のスマホアプリアイコンセット「subway」 マテリアルデザインの色付きアイコン1400＋「Material Design Icons」

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

multiscroll.js - split multi-scrolling pages plugin 迫力のあるページ切り替えが可能なマルチスクロール効果実装「multiscroll.js」。 ページを半分に分割してそれぞれ逆方向にスクロールして迫力のあるページ切替え効果が作れます パララックスはもうよくみる物になってしまいましたが、こちらは新鮮かも。 関連エントリ フルページスクロールするサイトを作るのに使える「fullPage.js」 スクロールに連動してアニメーションやパララックス効果が作れる「ScrollMagic」 スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 完璧なスクロールバーを実現できるjQueryプラグイン「perfect-scrollbar」 スクロールにより積み重なるナビゲーションヘッダーを作れる「Slinky.js」

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 スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。

フクガンRSS フクガンRSSはブログの「記事タイトル」と「本文中の画像」を取得し、一覧表示できるブログパーツです。複数のブログから、単一のブログから、それぞれ取得できます。アカウントの作成も不要。自由度が高く、かなり思い通りのレイアウトで表示する事が可能なのが最大の魅力です。 このサイト内に新しい解説ページあり ※サイト内にさらに新しいページがあります(コード取得方法あり) RSSから画像をサムネイル化するブログパーツ「複眼RSS」がパワーアップ。400ページ分のサムネイル表示可能に 以下、フクガンRSSがリリースされた直後の情報です。資料としてお読みください。 RSS情報を取得し、こんな風に表示されます。 ▲これはダミー画像です。 2ｘ3個、画像は130ｘ100とかも可能。 こんな風にRSS情報からブログ記事を写真リンクで表示出来ます。 サイトへ飛ぶと、ページ上部に各種RSSサンプルが

Ladda ボタンに直接ローディングアニメーションを付けられる「Ladda」。 ボタンを押すとボタンに回転するアニメーションが付与され、そのまま結果をまつ、というような分かりやすいUIが実現可能です 文字＋ボタンを円形のボタンにして背景をグレーにしたり、そのボタン自体をプログレスバーにしてしまうなど、面白いデモが詰まっていますので一度是非試してみて下さい 色々なUIのデザインの仕方があるなぁという関心をしてしまいますね 関連エントリ 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 １ページ内で複数ページに分割できるjQueryプラグイン「windows」 エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 リアルなア

$('.gallery').stripe(); You have a gallery of images, and you are tired of the same old gallery plug-ins, you want something that reminds you of a shredder, well that is this. Things to note: The height of the gallery is determined by the height of the smallest image. The images are proportionately down scaled to fit, and preserve image quality. You can use a combination of portrait and landscape

Fixed Background Scrolling Layout | Codrops 不思議な間隔に陥る背景をスクロールするレイアウトデモ。 パララックスのようでパララックスではなく単に背景画像だけをスクローリングさせて面白い効果を演出できています デモページ ブラウザの進化で表現方法がどんどん広がりますね 関連エントリ ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」 テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」 CSSレイアウトをWEB上でサクッと作れる「PageBlox」 アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」

windows １ページ内で複数ページに分割できるjQueryプラグイン「windows」 <section>で区切ったブロックをフルスクリーンのスライドに分割してくれます。 スクロールでページを切替えますが、中途半端なスクロール位置になると自動補正をかけてくれます キーボードショートカットなんかが入るともっと便利だと思いました。 関連エントリ 一枚の画像を高速にスライドさせてアニメーション表示する「JZoopraxiscope」 Youtube動画とSlideshareのスライドを同期して再生できる「Presentz」

Fullscreen Pageflip Layout with BookBlock フルスクリーンでページめくりをするUI実装デモ。 なかなかいい感じのインタフェースのデモとサンプルのダウンロードが可能。 ページめくり部分はjQuery+CSSで実装されており再利用ができそう ページ全体をめくるというのもなかなかいい、と感じるデモでした。 完成度が高いのでそのままサイトに移植してもよさそうですね 関連エントリ ページめくりを実現するためのjQueryプラグイン集 Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 美しいページめくり効果が作れるjQueryプラグイン「Flippy」

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

公海555000kk线路检测—首页（欢迎您） 404! Page is Not Found ! 返回首页 XML 地图 | Sitemap 地图

Makisu ~ CSS 3D Dropdown Concept 紙がペラペラめくれる感じの3Dドロップダウンメニュー「Makisu」。 Safari等のブラウザで見て頂きたいのですが、メニューが重力でペラッペラとめくれる様がいい感じです。 殆どのブラウザで使えないのでアレですが、こういうものがどんどん出てきて技術の進歩を日々感じますね 関連エントリ CSS3の3D Transformで3Dのホバーエフェクト実装例 ピュアCSSでマリオを3D表示したデモ CSS3で3Dなクラウドを描く「CSS3D Clouds」 jQueryとCSS3を使った3Dのフォトスタック実装例

PFold: Paper-Like Unfolding Effect | Codrops 紙を折りたたむようなエフェクトが作れるjQueryプラグイン「PFold」 3D Transform を使っているのでSafari等のブラウザでご確認下さい。 本をめくるというよりは、折りたたんだ紙をめくるUIなんですがなんともオシャレです こんな素敵なインタフェースも数年後には当たり前の物となっていると思うとワクワクしますね 関連エントリ CSS3の3D Transformで3Dのホバーエフェクト実装例 キューブが3Dに回転するUIを作れる「jqCube」