Drawing a pathSVG IS AWESOME (so is skrollr) Scroll down for details WOOOT! WOOOT! WOOOT! WOOOT! WOOOT! WOOOT! WOOOT! WOOOT! WOOOT!
スクロールアニメーションによる立体コンテンツの見せ方 (2/2)
STEP 3：スクロール値でアニメーションさせる スクロール値の取得と、奥行きのあるコンテンツの作成ができたので、いよいよアニメーションをさせてみよう。 今回のデモでは、1画面の高さをheight: 100%; とし、スクロール値が#sectionの半分に達したときに「.card」のrotateXが0になるようにする。具体的には、以下の計算式で求めた値を変数rotateXに代入する。 変数rotateXの値をtransformプロパティのrotateX関数の引数に渡すことで、スクロール量に応じたコンテンツの変形が実現する。なお、rotateXの値がマイナス値になると「.card」が逆向きに変形してしまうため、値が0を下回ると0を代入して変形を止めている。 ■ソースコード（HTML） <div id="wrapper"> <div id="section" class="inner red"
ZURB Manifesto
We believe design can change the world. In fact, it already has. We’re doing this by helping people roll up their sleeves and apply customer-centric design practices to the work they do every day. What we mean by putting people first and using Design (with a capital “D”) to do it isn’t completely obvious. In fact, some of it is counter-intuitive. See What We Believe In UX design doesn’t exist We
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
