JavaScriptで連番画像をコマアニメーション - みかづきブログ その3
JavaScriptをつかってパラパラ漫画のようなコマアニメーションを実装しようとした際、よく使われる3つの方法を比較してみました。 imgタグのソースを切り替える imageタグのsrcを差し替えてパラパラ漫画を実装してます。 ブラウザの仕様、サーバ側の仕様によるとは思うのですが、srcを切り替えるたびにリクエストがはしるというストリーミングのような挙動になってしまったことがあったので、最近はこの実装方法は敬遠しています。 DEMO HTML <img id="img" src="" /> JavaScript (function(win, doc) { "use strict"; var img = doc.getElementById("img"), srcList = [ "http://jsrun.it/assets/m/q/5/0/mq50U.png", "http://jsr
今風になった！Web制作で使える最近のjQueryプラグインまとめ
作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を再生するタイプ３つ スクロール ５．スクロールでクロスフェード ６．スクロールで奥行きを表現 ７．スクロールで分割 画像 ８．APNG ９．Google 画像検索風ライトボックス １０．トイカメラ風のフィルター ポップアップ １１．おしゃれなアラート １２．
SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
