ページ遷移を意識させないアニメーションによるページ切り替え効果実装:phpspot開発日誌
Animated Page Transition 2 in Ajax | CodyHouse ページ遷移を意識させないアニメーションによるページ切り替え効果実装 Ajaxを使ってはいるものの全くページ遷移を意識させませんが、URLはきっちり切り替わっている所が特徴。 当然きりかわったURLにアクセスしても同じようにページが表示されます。レスポンシブでアプリでも綺麗に表示されるのがいいですね。 iPhoneでみてみたところ枠以外はアプリにしか見えないのが素晴らしい。紙芝居のようなWEBはどんどん過去のものになっていきそう 関連エントリ オートコンプリート可能なプルダウン実装「jquery.ajax-combobox」 サイトのAjax化が簡単になるフレームワーク「intercooler.js」
CSSアニメーションの終了をJSで検知してコールバックを実行できるJS:phpspot開発日誌
Detecting CSS Animation and Transition End with JavaScript ? Osvaldas Valutis CSSアニメーションの終了をJSで検知してコールバックを実行できるJS CSSアニメーションの終了と共にJSを発火できるので便利そうです。 関連エントリ CSSアニメーションで音楽に視覚効果を与えられる「css-visualizer」 ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」 CSSアニメーションによるクリックアニメーション実装チュートリアル CSSでアニメーションを交えながらコンテンツをカッコよくフィルタリングするデモ WEB上でCSS3アニメーションを組み立てられる「Bounce.js」
ブロック要素の下部をスクロールに応じ曲げてカッコよくするサンプル「Curved Cut」:phpspot開発日誌
Curved Cut ブロック要素の下部をスクロールに応じ曲げてカッコよくするサンプル「Curved Cut」。 スクロールするとカーブがが緩まっていきます。 関連エントリ 手放しで自動画面スクロールを可能にするjQueryプラグイン「hungryscroller」 スクロール位置調整を細かく出来るjQueryプラグイン「ScrollAdvance」 スクロールを上に移動でバー表示ができるjQueryプラグイン「scroll-up-bar」 完璧なスクロールバーを実現できるjQueryプラグイン「perfect-scrollbar」 OS Xのトラックパッドスクロール実装jQueryプラグイン「TrackpadScrollEmulator」
数値のカウント上昇をアニメーション表示できる「countUp.js」:phpspot開発日誌
countUp.js 数値のカウント上昇をアニメーション表示できる「countUp.js」。 最初が0で徐々に数値があがっていく演出を作ることができます。逆にカウントダウンなんかも可能みたい。 どれだけの点数が出たのか？カウントアップすることでドキドキしたりしますが、そういったUIを実装する際に使えそう 関連エントリ 光ながらアニメーションさせるエフェクト作成jQueryプラグイン「Flare」 スプライトアニメーション作成用jQueryプラグイン「Phantascope」 CSS3アニメーションするモーダルダイアログ実装jQueryプラグイン「Block Slide」 CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」
縦方向にスクロールするクールなティッカーを実装できるjQueryプラグイン「vTicker」:phpspot開発日誌
vTicker 縦方向にスクロールするクールなティッカーを実装できるjQueryプラグイン「vTicker」 ティッカーというと横スクロールなものをイメージされる方も少なくないかもしれませんが、縦にカッコよくスクロールするティッカーが実装できます テキストはulリストで定義して初期化するだけで使えます 最新ニュース等を１行で表示したい場合に使えるプラグインですね 関連エントリ エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 テーブル内容を入力値でフィルタリングできるjQueryプラグイン「FilterTable」 レスポンシブでタッチ端末で使えるオーディオプレイヤ実装jQueryプラグイン「AudioPlayer」 マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」 アプリ風のなめらかなサイドメニューが実装できるjQue
Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」:phpspot開発日誌
Jquery-flip Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」。 次のように、縦にも横にもページをめくる風のUIが作れます。アプリ程ではないにせよ、面白いエフェクトがブラウザ上で作れるのはいいですね 使い方次第だとは思いますが、１から作ろうとすると大変そうなので覚えておくとよさそう 関連エントリ １ページ内で複数ページに分割できるjQueryプラグイン「windows」 マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」 レスポンシブなカバーフローっぽいスライドショーが作れるjQueryプラグイン「Flipster」 レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 テーブル内容を入力値でフィルタリングできるjQueryプラグイン「FilterTable
レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」:phpspot開発日誌
Unslider ? the super-tiny jQuery slider レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 クロスブラウザ・キーボードショートカット・タッチ等にも対応しており、最近の環境にマッチした使い方ができます。 コールバック、スピード調整等のオプションも指定可能。 シンプルなスライダーを実装する際にレスポンシブでタッチ対応というのはなかなかありがたいところですね 関連エントリ パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 タッチ可能でレスポンシブなスライダー実装「RoyalS
LightBoxはここまで進化したよ「VisualLightBox」:phpspot開発日誌
jQuery Image Lightbox: Prime Time DEMO LightBoxはここまで進化したよ「VisualLightBox」 CSS3等を使ってかなりオシャレに進化したLightBoxが実装できます。LightBoxはもう８年ぐらいまえに登場して、今オリジナルをみるとなんか古い感じがするということで時の流れを感じます クリックするとオシャレに拡大。 テーマが大量にあって好みのデザインを選びたい放題 Windowsっぽいスキン。LightBoxが出たのってポップアップを禁止するツールが多く出てきたことが背景にありますが、ページ内ポップアップされていて面白い。 関連エントリ スワイプできるLightBox実装jQueryプラグイン「Swipebox」 今こそ知っておくLightbox風プラグイン20+
JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」:phpspot開発日誌
hint.css - A tooltip library in CSS JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」。 指定位置にカーソルを合わせるとポップアップするツールチップヒントを次のようにCSSだけで実装できます。 ヒント位置も上下左右と自由に配置でき、カラーなどもCSSでカスタマイズできるみたい シンプルで軽量なのがメリットでしょうか。 関連エントリ いろんな種類のツールチップを簡単実装できる「Opentip」 スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」 可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」 色々とカスタマイズが可能なツールチップ実装jQueryプラグイン「PowerTip」
スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」:phpspot開発日誌
jKit - jQuery based UI Toolkit - Index スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」 １つのライブラリで様々な機能を実現できます。必要に応じて読み込む必要がありますが、基本的にマークアップと属性をベースに記述でき、スクリプトを可能な限り書かないでもよいような実装ができるみたい。 スライドショー LightBox ソータブルなテーブル 簡易グラフ スクリプトを書くのが苦手という方は使ってみてもよさそうなライブラリでした。 関連エントリ 超クールなjQueryUIテーマ「Delta」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI
これは超使いやすいページネーションの次世代UI:phpspot開発日誌
Slider Pagination Concept - with jQuery UI Slider これは超使いやすいページネーションの次世代UI。 普通、リストページのページネーションといえば、「 1 , 2, 3, 4 ,5 次へ> 」みたいなUIが基本ですが、そもそもこのUI疑ってかかってもいい時期なのかも。 要は現在のページ番号と、ページを前後と、ページ指定で送れればいい、という要件を満たせばいいわけでもっとシンプルに出来るはず。 今回紹介するページネーションのデモ ページ番号の部分はボタン風になっているので押してみましょう。 するとスライダーになってドラッグ＆ドロップでページ指定が簡単に出来ます。 30までドラッグ＆ドロップして話すと30ページ目が開く、というようなイメージ 次へ、前へ、といった直感的に分かりやすいボタンも実装されていて必要十分。 従来のページネーションは作る場合
これは使える！画像をレスポンシブに切り取るサンプルコード:phpspot開発日誌
Focal Point: Intelligent Cropping of Responsive Images | Design Shack これは使える！画像をレスポンシブに切り取るサンプルコード。 ブラウザ幅を小さくした際に、画像も小さくしてしまう、のではなく、元の大きな画像の指定した部分を切り抜いて表示する仕組みが紹介されています。 divのclassにどこから表示するのか？を記述しておくだけで、超簡単に場所を指定できるところもいいです。 ニュース等の画像では、重要な部分以外にも背景などが含まれる場合がありますが、スマホなどでは重要なところを大きく表示したいという事があるかと思います。 そういう時に、これを使えば便利そうですね。 関連エントリ レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」 レスポンシブなテーブル作りに役立つjQueryプラグイン
SVGを使った高度なアニメーションを実現できるライブラリ「BonsaiJS」:phpspot開発日誌
BonsaiJS - A Graphics Library SVGを使った高度なアニメーションを実現できるライブラリ「BonsaiJS」 高度なアニメーションが直感的なAPIによって実現できるライブラリです。 デモページでのデモが楽しい。 アニメーションのコードも分かりやすくドキュメントも充実してます 関連エントリ faviconを円グラフにしてアニメーションできる「Piecon」 CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル マウスを近づけると徐々にアニメーションする効果を作るjQueryプラグイン「Approach」 アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」
レスポンシブなナビゲーションの見本やチュートリアル:phpspot開発日誌
10 Responsive Navigation Solutions and Tutorials - Speckyboy Design Magazine レスポンシブなナビゲーションの見本やチュートリアル。 ナビゲーションなんかは最初から幅を取ったものをデザインしたりするためレスポンシブなWEBデザインにした時にいかに縮小するか、というテクニックを知っておくといざ作る時に便利。 通常のナビゲーションをいっそドロップダウンリストに動的に変更してみたり、単純にブロックをフロートで横並びにしてみたりと見本が色々。 一度見ておけば、ああ、こういう縮小の方法もあるよな、というネタ帳になりそうです こういったレスポンシブなテクニックも2,3年前には具体的な名前や方法としては、なかったような気がするので、本当にこの業界は覚える事が多いですね 関連エントリ タッチ可能でレスポンシブなスライダー実装「Roy
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドラッグ＆ドロップでアップロードが簡単実現できるjQueryプラグイン「Dropzone.js」:phpspot開発日誌