CSS3を使ったアニメーションとインタラクション
CSS3を使うと、静的な表現だけでなく、アニメーションやインタラクションが加えられます。その作例を8つご紹介します。最後の例を除いて、JavaScriptコードは書きません。いずれも中身は、リンクしたノートで詳しく解説しています。 01 テキストのアニメーション ただのテキストでも、フォントを選んでCSS3でアニメーションさせると、表現力は大きく高まります。 01-01 テキストをイルミネーションのように点滅させるアニメーション 「Monoton」フォントを使って、text-shadowプロパティで光彩を与えました。そして、animationプロパティにより、イルミネーションの点滅のようなアニメーションを加えています(サンプル001)。 サンプル001■CSS3: Flickering billboard light refined 01-02 テキストを順に浮かび上がらせては消すアニメー
数学を使ったJavaScriptコーディング
幾何学的な計算や物理運動を表すには、数学の知識が求められます。もっとも、計算は必ずしも難しい訳ではありません。考え方さえわかれば、応用できることが多いです。ここでは、一見難しそうなベクトルの外積と微分のふたつについて、その使い途と考え方をリンクでご紹介します。また、ビデオ映像やjsdo.itのサンプルも掲げました。 01 ベクトルの外積をどう使うか ベクトルの中でも「外積」は、考え方のわかりにくい計算です。いきなり概念を捉えようとすると難しいので、何に使えるのかを知ることから始めましょう。 01-01 珍味ベクトル外積3種盛り 2014年1月18日土曜日に催された第12回Creators MeetUpで、2次元のベクトルに絞ったインタラクティブなサンプルを例に、外積がどう使われているのかをご紹介しました。USTREAM録画も公開しています。 サンプル001■立方体をマウスポインタの位置に応
オブジェクトが動く速度と加速度と微分の考え方
物理法則にしたがったオブジェクトのアニメーションをスクリプティングするとき、数学の「微分」の考え方で捉えられると応用の幅が広がります。微分と聞くと難しそうに響きます。けれど、大雑把にいってしまえば、オブジェクトの動きについて変化を見るということです。アニメーションがつぎのフレームでどう変わるかを考える、といってもよいでしょう。 01 等速直線運動 決まった速さで同じ向きに動き続ける「等速直線運動」なら、つぎのフレームに移るたびにオブジェクトの位置(xy座標)に定数を足します。この定数(xy平面で捉えるならベクトル)が速度です。つぎのフレームにおけるオブジェクトの位置は、今の位置に速度を加えて求めます。 位置 += 速度 時間(t)と位置(x)をそれぞれ横軸と縦軸にした等速直線運動のグラフは、下図001のように一次関数(x = vt + x0)で表されます(「直線の式(方程式)」参照)。一次
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
