JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
Using the Page Visibility API - Google Chrome - Google Code
Using the Page Visibility API The page visibility API is an experimental implementation of the webperf WGâs proposed page visibility API in new versions of Chrome (starting in version 13). It allows sites to detect whether they are being displayed to the user. Why youâd use it With tabbed browsing, thereâs a reasonable chance that any given web page is in the background and thus not visible
Web Developer's Guide to Prerendering in Chrome - Google Chrome - Google Code
Web Developer's Guide to Prerendering in Chrome Prerendering is an experimental feature in Chrome (versions 13 and up) that can take hints from a siteâs author to speed up the browsing experience of users. A site author includes an element in HTML that instructs Chrome to fetch and render an additional page in advance of the user actually clicking on it. As a web developer, you may be interested
PCでファイル保存と同時にスマホなどでリロードされるJSを書いてみた | kzms2 – html,css,javascript
概要 エディタで保存して、いちいちブラウザに切り替えてリロード。 この作業ってコーディングしていると腐るほどするので面倒くさくなりますよね。 PCだけで完結するなら昔書いたエントリー（これは便利！エディタで保存と同時に3ブラウザを更新）に書いてあるようにWindowsならどうにかできます。 ですがスマホとかになるとリロードとか非常に大変！ というわけで作ってみました。詳細は↓の動画を見てみてください。 スマートフォンで自動リロード PCで自動リロード 特徴 使い方は簡単。編集しているファイルにJavaScriptを1～2行挿入するだけ。 1 2 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script src="http://kzms2.com/lab/r
iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作った
iPhoneやAndroidなどの人気の スマートフォン向けのJavascript製 フレームワーク・wink toolkitを触っ てみました。動作サンプルが豊富 で割と応用できそうだったので日本 語でサンプルを作ってみました。 スマートフォン向けのWebサイトやネイティブアプリに使えそうなJavaScript製のフレームワークです。沢山の動作サンプルがあって、内容もとっても分かりやすかったので（完全ではないけど）日本語サンプルを作成してみました。 スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜
はてなチーフエンジニアが聞く、サイボウズLiveのアジャイルな開発現場 - はてなニュース
「ビジネス上のコミュニケーションを、メールの不便さから解放したい」という思いから2009年にサイボウズがスタートした無料コラボレーションツール「サイボウズLive」。その開発現場は、Webアプリケーション開発の流行をうまく取り入れたアジャイルなものでした。その様子を、はてなチーフエンジニアの大西康裕がインタビューしました。テーマは、プログラミング言語の選び方から、自動ビルドと自動テスト、リファクタリング、チーム内コミュニケーションなど。大西自身も「面白かった」と語る取材の様子をぜひお楽しみください。記事の最後ではプレゼントもご案内しています。ところでこの取材には、サイボウズ・ラボの竹迫良範氏が、なぜか大量のレッドブルを抱えて登場したのですが……。 http://live.cybozu.co.jp/ （※この記事はサイボウズ株式会社提供によるPR記事です。） 大西 はてなチーフエンジニアの大
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5.JP - 次世代HTML標準 HTML5情報サイト