パラグラフ(p)とヘディング(h1、h2、h3)の指定するフォント、サイズ、太さをレスポンシブに極める。凝るには、以下のようなパララックスがある。
スクロールすると背景の柄が徐々に広がって表示される。
段落の塊りが左や右から移動して表示される。
画面は縦長と横長、大サイズと小サイズ。注視すべきは、読み易い文字と画像の拡大。
ブレークポイントとパラグラフの一行の文字数と画像のズーム。
モバイルにはスクロールとスワイプに関連する演出効果が多く用いられる。
スワイプでページを移動する機能はもはやモバイルでは必須である。
hoverしたとき、スクロールしたとき、アニメーションが多く使われる。
スクロールするとトップイメージが徐々にZOOMしていく仕掛けを施している。
SEOを意識して制作する。
参考サイト:「jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法」