サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
画力アップ
fuzz-jpn.com
HTML, CSS, JavaScriptを使い、当ブログのサイトロゴのようなノイズエフェクトの実装方法を紹介します。 CSS3のアニメーション周りを使えばJavaScript無しでも実装できそうですが、ランダムな動きをつけたり細かい制御をかけたい場合などもあるのでJavaScriptでアニメーションさせてみます。 デモページ ソースの紹介の前に、簡単にまずは原理を。 ノイズさせたい画像の高さ分のHTMLの要素を用意。 (高さ120pxの画像なら120個) 各要素の高さを1pxに指定し、背景画像にノイズさせたい画像を指定。 背景画像位置は各要素1pxずつずらす。 これで見た目は画像そのまま、実態は高さ1pxの要素の集合体となります。 そして、これらの要素にposition: relativeを指定し、アニメーションループ中にleftの値をランダムに動かす。 これでノイズ
この記事では、EaselJSを使って、ボールが跳ねる動作の簡易物理シミュレートをしながら、EaselJSとアニメーションのプログラミングの基本をなぞってみます。 今記事の、目指すべき完成形はこちらです。 完成形デモページ ボールがポーンと跳ねる動きを作成していきます。 目次 EaselJSについて EaselJSの基本的な扱い 1.ボールの作成と等速直線運動 2.ボールの跳ね返り 3.重力を与える 4.摩擦を与える まとめ EaselJSについて EaselJSについてはたくさんのブログで詳細に説明されていますが、簡潔に言えば「Canvasの2Dアニメーションがより作成しやすくなるライブラリ」と言った感じでしょうか。 FlashのAS3やっていた方は各クラスの構成など書き方や扱い方が類似しているので馴染みやすいかと思います。 公式ドキュメントが大変見やすく、参考になります。
このページを最初にブックマークしてみませんか?
『fuzz-jpn.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く