シングルページレイアウトサンプル-01

ポートフォリオなどに使えそうな、シングルページレイアウトのサンプルを作成しました。

以下がサンプルです。jQuery を使わないでCSSだけで、組み上げています。

シングルページレイアウトのサンプル 01

header, about, Recent Activity, skill, contact の5つの項目 (section) で構成されています。

本当は、CSSの「transition」プロパティの練習で作成していたサンプルだったのでアニメーションなどは マウスカーソルが hover した時に実行する、CSSの「transition」プロパティだけで実装しています。

Javascript や jQuery を使用していないので、ページロード時にアニメーションが開始しません。

wiewport 上に マウスカーソルがあるときにだけ、アニメーションがスタートします。

その為、マウスホイールでスクロールした場合と、ページ内の「Next」「Prev」ボタンでを使用した場合はアニメーションしますが、ページ上のスクロールバーを使用した場合など、マウスカーソルが画面上にない時は、アニメーションしません。

( 本来は Javascript を使った方が良いのですが、今回はあくまでも「transition」とレイアウトの練習なので、ひとまずこの状態で終了としています。)

「transition」でのアニメーションは、Web Design Leaves様の、こちらのページで勉強させていただき、実装しました。

^