ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ:phpspot開発日誌
Path menu in pure CSS3 ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ path.comのメニューというのは次のようなもので、クリックするとアニメーションしながらビローンと開くようなものです これをCSS3で実装したデモが公開されています。 アニメーションもしてJavaScriptも使っている気がしますがピュアCSS３とのこと。 気持よく動きます スマホサイトに導入してみるといいかもしれませんね。 関連エントリ フリーのCSSメニューテンプレートとチュートリアル集 リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 CSSのナビゲーションメニューサンプル５５
[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic
HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]
Firefox使いづらいって奴は取り敢えず俺の設定パクッてみろ:ハムスター速報
Firefox使いづらいって奴は取り敢えず俺の設定パクッてみろ Tweet カテゴリ☆☆☆ 1：以下、名無しにかわりましてVIPがお送りします：2011/07/25(月) 20:22:36.36ID:Lx2L/mMp0 Firefoxについて文句言ってる奴は、だいたい的外れな批判ばっかり ググれば解決するような問題ばっかり そういう奴は一生IE使ってろって言いたいところだが、俺の超使いやすいFirefoxの設定を全部言ってくから、取り敢えず真似してみてくれ 一応書きためてる。質問には適当に答えられるときだけ答えてく 今回扱うのはFirefox5について 始める前に、取り敢えず、「Add-on Compatibility Reporter」というアドオンで、アドオン互換性チェックを切ってくれ じゃないと話が進まないから 目的：機能性・有用性・省スペース化を心がける その上で、遊び心を忘れない
JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」:phpspot開発日誌
html2canvas - screenshots with JavaScript JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」 サーバサイドでブラウザを動かしてスクリーンショットを取るというより、利用者のブラウザ上でスクリーンショットをJavaScriptとcanvasを使って生成しちゃおうというものらしいです。 canvas非搭載ブラウザはflashcanvasやExplorerCanvas等の代替が必要とのこと。 html2canvasでレンダリングされたサンプルも見ることが出来ます。 frameやobjectのサポートはしていない点に注意。 スクリーンショットを取る仕組みをサーバに仕込むとタイムラグがあったりサーバ側は大変だったりで色々問題点を抱えていますが、クライアント側でやれば画像を受け取るだけでいいので便利です。 クライアントごとの表示
ブロックを積み上げていく感覚でプログラミングを学べる『Waterbear Lang』 | 100SHIKI
ちょいとマニアックだが、大事なツールなのでご紹介。 Waterbear Langでは、ブロックを積み上げていくことでプログラミングを学んでいくことができる。 それぞれのブロックがある処理を担当していたり、分岐やループを表している。 これらを組み合わせていくことで簡単なプログラミングが出来てしまう、ということですな。 個人的にプログラミングは誰もが学ぶべきと思っている。こうしたツールはもっと出てきて欲しいですね。
PHPを使って画像をアップしてjQueryで切り抜くチュートリアル:phpspot開発日誌
Image Upload and Cropping with PHP and Jquery PHPを使って画像をアップしてjQueryで切り抜くチュートリアルとデモが公開されています。 配布されているプログラムをダウンロードしてプロトタイプとして使って開発効率を高める事もできますし、単に学習用に使うこともできそうです。 実際のサービスで使うにはセキュリティの問題がないかどうかをちゃんとチェックして使いましょう デモページはこちら 関連エントリ PHPでWEBサイトのスクリーンショットを作成するチュートリアル PHPでAmazon SESを使うチュートリアル PHPとGDを使ってCaptchaを自作するチュートリアル
[JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス
ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3のエフェクトなどオプションとして利用が可能です。 Mashiの主な特徴 スタンダードなHTML, CSS, JavaScriptでFlashのようなムービー、アニメーションを作成できます。(X)HTMLコンテンツに設置が簡単にできます。 41KB/13KB(CDN+GZip)と非常に軽量で、オブジェクト指向、モジュール式です。 基本的な利用では、追加のプラグインは必要ありません。 IE6をはじめ、すべての主要なブラウザをサポートしています
たったの50行！ node.js でツイート垂れ流しサイト作成法 - 虫けらロック
修正：よく数えたら60じゃなくて50行だった。しかもハッシュタグ垂れ流しでなく好きなキーワード（もちろんハッシュもなんだけど）監視するものになっていた。適当すぎた。 ↓の通りコマンド打ってファイル作っていけば、twitterで指定したキーワードを監視してだらだら垂れ流すサイトが出来上がります。 必要なもの node.jsとnpmをインストールした環境 適当なtwitterアカウント コマンド ワークスペース作って必要ライブラリインスト linuxじゃない方はなんとなくそれっぽいことをして下さい mkdir twithash cd twithash mkdir views npm install socket.io npm install twitter-node npm install express vi web.js vi views/index.html web.jsの中身 アカウン
jQueryで長くなったページを分割してボタンで切り替える
jQueryで長くなったページを分割してボタンで切り替える 長いページの場合、アンカー名をつけてページ内リンクをする場合があると思います。 でも、やっぱりページ別けしたいかな、でも同じ内容だし別けちゃうのもな、、、そんなときのためにjQueryを使用してわりとそのままのマークアップでページを分割してボタンで切り替える方法をご紹介します。 投稿日2011年05月25日 更新日2011年05月25日 ページ内リンクしたマークアップでページ分割する 「section」ごとにページを分割します。 それぞれにidを割り振り、そのidに飛ぶように「nav」にはリンクを付けます。 普通のページ内リンクですね。 html <ul class="nav"> <li><a href="#c1">1</a></li> <li><a href="#c2">2</a></li> <li><a href="#c3">
立体的なCSS3でデザインされた検索フォーム実装チュートリアル:phpspot開発日誌
Creating A Rocking CSS3 Search Field 立体的なCSS3でデザインされた検索フォーム実装チュートリアルが公開されています。 次のようなデザインですが、これは検索フォームだけではなく色々なところで使うことで個性的で立体的なデザインを作れる気がします。 立体的なボタンはなんとなく押したくなりますね。 押すとちゃんとボタンがへこみます。 CSS3のテクニックを色々と使ったテクニックになっているので解析するだけでも勉強になりそうですね。 関連エントリ CSS3のよく使いそうな１０個のテクニックのまとめ CSS3で実装されたボタンのサンプルやチュートリアル総まとめ CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 コピペで使えるCSS3ボタン６つのレシピ
requestAnimationFrame ＜ よーしおまえらー、アニメーションにsetInterval使うなよー - くろまほうさいきょうでんせつ
より適切なものが追加されたのでそっちを使いましょう。 setInterval/setTimeout → requestAnimationFrame; これまでは setInterval function render(){ // アニメーション 1フレーム分の処理 } setInterval(render, 1000 / 60); これはもう古い。 これからは requestAnimationFrame function animationLoop(){ render(); requestAnimationFrame(animationLoop); } animationLoop(); こうすべし。 requestAnimationFrameにすると何がいいの？ 複数のアニメーション描写処理を一つにまとめて最適化してくれる 同じ用に動かしている物体A,Bの動きが次第にずれていくとかがなくな
[JS]通知パネルをアニメーションで表示する超軽量のスクリプト -Humane JS
jQueryなど他のスクリプトに依存せずに動作する、アニメーションで表示する通知パネルを実装するスクリプトを紹介します。 Humane JS デモページ [ad#ad-2] 上記デモの「Welcome Back」の通知パネルは、下記のスクリプトで実装されています。 JavaScript humane("Welcome Back"); 通知パネル内のテキストにはHTMLも使用可能で、スタイルシートを利用することも可能です。 JavaScript humane("<p style='color:red'>Invalid Username and/or Password</p>"); [ad#ad-2] スクリプトのオプション スクリプトのオプションでは下記を設定できます。 通知パネルの表示時間 表示時間終了後、マウス・キーボード操作があるまで表示 新しい通知パネルがすぐに表示されるかどうか 対
[CSS]画像のキャプションを省スペースにさりげなく表示させるスタイルシート
画像にマウスをホバーさせると、キャプションがアニメーションでスライド表示される省スペース用エフェクトを実装するスタイルシートのチュートリアルを紹介します。 Slide In Image Captions [ad#ad-2] キャプションをスライド表示させる画像のデモ デモでは、画像ごとに異なる方向から異なる位置にキャプションがスライド表示されます。 デモページ スライドは、CSS3 transitionに対応したブラウザ（Chrome, Safari, Opera）ではアニメーションで表示し、非対応ブラウザ（Firefox3）ではアニメーション無しで表示されます。 [ad#ad-2] 以下は元記事の各ポイントを意訳したものです。 なぜ、このようなエフェクトをするのでしょう？ それはレイアウトのスペースを節約するためです。そして、キャプションの存在は画像からユーザーの気を散らしてしまうことも
[JS]わずか2行のスクリプトで実装するアニメーション機能付きスライドショー
A slide-show in 2 lines of JavaScript デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: コンテンツ（HTML） Step 2: ページめくり（JavaScript） Step 3: スタイリング（CSS） Step 1: コンテンツ（HTML） はじめに、スライドショーのコンテンツを用意します。 ここでは一つのスライドに一行のテキストを表示します。 HTML5 <!DOCTYPE HTML> <html> <head> <title>My slides</title> </head> <body> <section>This is the <em>first</em> slide</section> <section>This is the <em>second</em> slide</section> <secti
わずか2行でスライドショーを実現「A slide-show in 2 lines of JavaScript」
twitter facebook hatena google pocket フルスクリーンのスライドショーを2行で実現するチュートリアルです。 なお、原文だとJS2行となっていますが、もうちょいあります。 簡単であることには変わりありません。 via：A slide-show in 2 lines of JavaScript sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 これをhead内に記述。 <script src="jquery-1.5.1.min.js" type="text/javascript"></script> 次にhtmlを以下のように書きます。 <div>This is the first slide</div> <div>This is the second slide</div> <div>This is the third
[JS]あらゆる要素をガタガタ、ぷるぷる、ちりちりと振るわせるスクリプト -jRumble
テキストリンクやナビゲーションなど、ページ上のあらゆる要素を振るわせるjQueryのプラグインを紹介します。 jRumble デモ 振るわせるアニメーションは、ガタガタをはじめ、ぷるぷる、ちりちり、などにすることができます。 [ad#ad-2] jRumbleの実装 jRumbleの実装は簡単です。 div要素でもリンクでも、あらゆるDOM要素をガタガタさせることができます。 JavaScript 「jquery.js」と「jrumble.1.0.js」を外部ファイルとして指定します。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jrumble.1.0.js"></script> JavaScript ガタガタさせるDOM要素をスクリプト
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
【ハウツー】HTML5 Canvas×jQuery、グレースケールの画像を自動生成する方法 (1) 自動生成プログラムの作成手順 | エンタープライズ | マイコミジャーナル
HTML5 Canvasでグレースケール画像を自動生成 WebDesignerWallにて、HTML5 CanvasとjQueryでグレースケールを実現するチュートリアルが公開されている。画像にマウスを乗せると、グレースケールの画像がカラーになるというものだ。 HTML5 & jQuery Grayscale Demoより。グレースケールの画像にマウスを乗せると、カラーで表示される これまでこのようなユーザインタフェースを実現するには「カラーの画像」と「グレースケールの画像」の2種類を用意する必要があった。このチュートリアルではHTML5のCanvasを活用し、オリジナルの画像からグレースケールの画像を自動生成する方法を紹介している。ポートフォリオやWebアルバムなど、さまざまな場面で活用できそうだ。 本稿では、その方法を簡単に紹介していこう。 使い方 グレースケールの画像を自動生成したい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
