HTML5+jQueryのドラッグ&ドロップに対応したアップローダー・droparea
Gmailライクにローカル環境からブラウザに ドラッグ&ドロップで画像をアップロード可能 にするHTML5+jQuery製のアップローダー droparea。今後、こうしてキーボードを使う 頻度が減っていくんですかね・・HTML5の 出現で一気に加速した印象ですね。 jQuery HTML5 UploaderやjQuery File Uploadの後発に当たりますね。 イメージアップローダーです。Gmailライクにドラッグ&ドロップでアップロード出来ます。 コードs = { 'init': m.init, 'start': m.start, 'complete': m.complete, 'instructions': 'drop an image file here', 'over' : 'drop file here!', 'nosupport' : 'No support for t
[JS]text-shadowをアニメーションでコントロールするスクリプト -animate-textshadow.js
テキストにシャドウをつけるtext-shadowをアニメーションでコントロールして、さまざま面白いエフェクトを生み出すjQueryのプラグインを紹介します。 Animated CSS text shadows with jQuery デモページ [ad#ad-2] デモではさまざまなtext-shadowのアニメーションを楽しめます。 以下、デモを紹介しつつ、その実装方法もご紹介。 デモ：基本 一番シンプルな基本となるデモです。 HTML HTMLはすべてのデモで、テキストをspan要素で実装するだけです。 <span id="basic">Click me</span> CSS text-shadowをアニメーションでコントロールするためには、最初にtext-shadowで値を持たせる必要があります。 .text { text-shadow: 3px 3px 3px #ccc; } デフ
CSS3なキーフレームアニメーションのデモ:phpspot開発日誌
CSS3 Keyframe Animation Demo CSS3なキーフレームアニメーションのデモ。 CSS3で動くアニメーションとそのサンプルコードが確認できます。 こんなことが出来るとは知りませんでした。ちょっとやり過ぎのような気もするけれど数年後には当たり前の技術になっていたりして。 日がくれていくというシンプルなアニメーション。 コードも公開されています。 WebkitかFirefox5が必要とのこと。 関連エントリ CSS3をフル活用した立体的な画像ギャラリー作成デモ CSS3のよく使いそうな１０個のテクニックのまとめ CSS3で実装されたボタンのサンプルやチュートリアル総まとめ CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」
PHP＆jQuery＆CSS3でMacのPhotoboothを作るチュートリアル:phpspot開発日誌
Photobooth with PHP, jQuery and CSS3 | Tutorialzine PHP＆jQuery＆CSS3でMacのPhotoboothを作るチュートリアル。デモのダウンロードも可能。 デモページはこちらで、なかなかカッコいい。 ページの下部にカメラがあり、クリックするとWEBCAMのFlashインタフェースが開き、写真をとってそのままUPみたいな流れのものが作れます。 カメラ付きのMacbookやAirでも当然使えます。 下部のレンズのクリックでカメラが出ます（当PCにはカメラがついていないので何も表示されておりません） 画像をクリックするとLightBox風にポップアップします。 チュートリアルのわりにチュートリアルらしからぬクオリティ。 これを応用してプロフィール写真の撮影等、サービスに応用してみてもよさそうですね。 関連エントリ CSS3で実装されたボタ
jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば！ jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w
MdN Design｜総合情報サイト
PHPスクリプトによって動的に生成した画像をブラウザに表示させる場合、imgタグのsrc属性に画像生成用のPHPファイルを指定するが、もしこの時処理に問題があっても、エラーメッセージが確認できない。画像生成スクリプトにブラウザで直接アクセスし、エラーが出ていないか確認しよう。 imgタグのsrc属性にPHPファイルを指定した場合、エラーメッセージが出力されていてもブラウザには表示されないため、原因の特定に苦労する ブラウザのアドレスバーにPHPファイルへのURLを入力して直接アクセスし、エラーメッセージが表示されていないか確認しよう。ただし、エラーメッセージを表示させるにはdisplay_errorsが「on」に設定されている必要があるので注意する [INDEX] >>> [TROUBLE 50] MP3の外部サウンドをなぜかループできない >>> [TROUBLE 51] jQueryを
入力するのが楽しくなる、アニメーション機能を伴ったフォームを作成するチュートリアル | コリス
jQueryとCSS3を使って、複数のステップをアニメーションで次々に表示するフォームを実装するチュートリアルを紹介します。 How to Create A Multi-Step Signup Form With CSS3 and jQuery デモページ フォームの下部にある「プログレスバー」の存在もユーザビリティ的に見逃せない存在です。 [ad#ad-2] フォームのデモ フォームは全部で4つのステップで構成されており、さまざまなスパイスが含まれています。 2枚目のフォーム フォームの進捗状況は、下部のプログレスバーに表示されます。 ※個人的には%でなく、2/4が分かりやすいと思います。 フォームの実装 HTML：基本構造 フォームの基本構造は、4つのステップをそれぞれdiv要素に格納します。 <div id="container"> <form action="#" method="
グラフィカルに加速度を作って要素をCSS3アニメーションさせられる「Ceaser」:phpspot開発日誌
Ceaser - CSS Easing Animation Tool - Matthew Lein グラフィカルに加速度を作って要素をCSS3アニメーションさせられる「Ceaser」。 単純にアニメーションさせるだけではなく、加速度をつけたほうがよりリアルに活き活きと動かすことが出来ますが、そのアニメーションの加速度指定をベジエ曲線を描く要領で指定出来ます。 ベジエ曲線を指定したら「Left」「Width」といったボタンをクリックし、動きを確認出来ます。 動きを作ったら、*-transition: のCSS3プロパティが生成されるので、コピペで使うことが出来る模様。 関連エントリ ピュアCSS3で3Dアニメーション アニメーションの残像が残るjQueryアニメーションチュートリアル 特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン「TypeWriter」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
