ヘディング、パラグラフ

パラグラフ(p)とヘディング(h1、h2、h3)の指定するフォント、サイズ、太さをレスポンシブに極める。凝るには、以下のようなパララックスがある。

スクロールすると背景の柄が徐々に広がって表示される。

段落の塊りが左や右から移動して表示される。

Responsive website design

画面は縦長と横長、大サイズと小サイズ。注視すべきは、読み易い文字と画像の拡大。

ブレークポイントとパラグラフの一行の文字数と画像のズーム。

Scroll,Swipe

モバイルにはスクロールとスワイプに関連する演出効果が多く用いられる。

スワイプでページを移動する機能はもはやモバイルでは必須である。

Gimmick

hoverしたとき、スクロールしたとき、アニメーションが多く使われる。

スクロールするとトップイメージが徐々にZOOMしていく仕掛けを施している。

SEO

SEOを意識して制作する。

参考サイト:
「jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法」