ポートフォリオなどに使えそうな、シングルページレイアウトのサンプルを作成しました。
以下がサンプルです。jQuery を使わないでCSSだけで、組み上げています。
header, about, Recent Activity, skill, contact の５つの項目 (section) で構成されています。
本当は、CSSの「transition」プロパティの練習で作成していたサンプルだったのでアニメーションなどは マウスカーソルが hover した時に実行する、CSSの「transition」プロパティだけで実装しています。
Javascript や jQuery を使用していないので、ページロード時にアニメーションが開始しません。
wiewport 上に マウスカーソルがあるときにだけ、アニメーションがスタートします。
その為、マウスホイールでスクロールした場合と、ページ内の「Next」「Prev」ボタンでを使用した場合はアニメーションしますが、ページ上のスクロールバーを使用した場合など、マウスカーソルが画面上にない時は、アニメーションしません。
( 本来は Javascript を使った方が良いのですが、今回はあくまでも「transition」とレイアウトの練習なので、ひとまずこの状態で終了としています。)
「transition」でのアニメーションは、Web Design Leaves様の、こちらのページで勉強させていただき、実装しました。