実は、ark-under.netっていうサイトを、もうかれこれ７年ほどやってるんですが（ドメインをとったついでに改名。その前はark-underで、たいして変わらない）そのページを３年ぶりにリニューアルしましたよ、というお話。
ark-under.netとは？
なんかちゃんと説明したことがない気がするので、せっかくだから書いておきます。
サイトにもある通り「Mei Koutsukiがノリと勢いだけでおもしろそうなモノを全力でつくるサイト」です。
色んなサイトをつくっていますが、これらは殆ど「ark-under.netの作品」という位置づけだったりします。
このブログも、ark-under.netのコンテンツの一つのつもりだったんですが、だいぶ成長してしまったので元々のサイトの方が影薄くなりましたね…。
まぁそれはどうでもいいので、ark-under.netはMei Koutsukiの作品まとめページにしています。
まとめページ、一個作っておくと便利ですね。
Socialも、自分が利用してるサービス系ほぼ乗ってます。後々、あーこんなの使ってたわーってなるので、結構便利です。
今回の挑戦
今回はソース見てもらえば分かりますが、HTMLソースを極力シンプルにして、どこまでCSSで再現出来るか、という挑戦をしました。
普段使わない疑似要素や疑似クラスをめっちゃ使ってます。
あと、スクロールに合わせたアニメーションなんかもやってみました。
疑似要素で装飾
See the Pen 疑似要素で上下に要素を追加する by Mei Koutsuki (@mei331) on CodePen.
元のsectionにposition:relative;を指定し、疑似要素にposition:absolute;を指定しないといけません。
背景をレースの画像とかにしておけば、うまいこと重ねられる、というわけです。
スクロールに合わせて色んな動きを追加
See the Pen スクロールに合わせた動き色々 by Mei Koutsuki (@mei331) on CodePen.
上記のサンプルではスクロールに合わせて、
・ナビゲーションを要素の途中から固定
・指定された要素が透過
・指定された要素のサイズが変化
します。
要素の途中から固定は、ファーストビューで見せたいコンテンツがあって、ナビゲーションはその下に置きたい！という時なんかに使います。
半透明のナビの場合、スクロールしたら要素が見えなくなるとナビゲーションが見やすくなるのでいいかなーと。
指定された要素のサイズが変化するのも、ファーストビューでは大きく、でもスクロールしたら小さくしておきたい場合はいいかな、と。
h1の背景に画像を設定して、background-size:contain;を指定しておくと、背景画像が要素の高さに合わせて変化するので、スクロールに合わせたアニメーションのように見せられますよ。
もっとJavaScriptも勉強しなきゃですが、CSS3で色んなこと出来るようになってるので、CSSももっと勉強していかなきゃですね。
あ、今回サンプルをCodePenで表示してみました。ちょこっとサンプル作るのに便利ですねコレ。
