jQueryで歩くアニメーションに挑戦 | スターフィールド株式会社
jQueryを使ってFlashのようなアニメーションを目指す練習として、 歩くアニメーション作りに挑戦しました。 作り方 1.背景画像を準備する 今回は遠近感を出すために、遠くの背景から近くの背景に向かうにつれて、 早くアニメーションするようにします。 そのため、近くの背景ほど、長さのある背景にしました。 重ねて表示するので、PNGで書き出しました。 動かない背景 一番遠くの山 近くの山 一番近くの山 道(一番手前の背景) 2.歩く人の画像を準備する 今回は簡単に、２コマで歩いている状態を表現することにしました。 人物の高さを上下させると歩いている様子が伝わりやすいです。 3.HTMLを準備する “view”というoverflow:hiddenにしたボックスの中に、背景をposition:absoluteで順番に重ね、 最前面の人は、画像を切り替えるので、CSSのbackgroundでファ
jQueryとCSS3で手軽に実装できるスクロールエフェクト
2015年10月6日 CSS, JavaScript, jQuery 近頃Webデザインのギャラリーサイトで見かける素敵Webサイトって、どれもアニメーションなどのエフェクトがかっこいいですよね。という事で今回は、中でも簡単に実装できそうな効果をひとつ。スクロールすることで要素が可視範囲に表示されると、CSS3のアニメーションを使ったエフェクトが実行される、というのを実装してみようと思います。なんだか難しそう…と、食わず嫌いでいた人でも、基本さえおさえておけば、あとはアイデア次第で自分好みにカスタマイズできると思いますよ！ ↑私が10年以上利用している会計ソフト！ 基本：スクロールでテキストをぼわ〜んと表示 画面をスクロールすると、下からぼわ〜んとテキストが表示されるエフェクトを実装してみましょう！ HTML まずはエフェクトを与える要素をHTMLに記述。安心してください、まだ何も変わった
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
