スクロールすると奥に進むページを作る【IE完全無視】

先日、某案件でスクロールして奥に進むというページを作成しました。

IEを無視すれば意外とさくっと作れるものなのだという事を知ったので、忘れないように記事にしたいと思います。

ちなみに、今回使用するCSSのperspectiveプロパティは、まだ草案段階のプロパティですので、
今後変更がある可能性もある事をご了承いただきたいです。

シームレスに奥に進むページ

サンプルはコチラです。

サンプル

HTML

CSS

JavaScript

ざっくり解説

まずHTMLで、基盤となる親要素 .base を作り、
その中に、Z方向に動かす .scaler を作り、(英語は弱いので、クラス名は適当です。)
その中に、各セクション要素を並べます。

そして、このままではコンテンツの高さが無く、スクロールができないので、
コンテンツの高さを設定するための #scroll を最後に置きます。
この高さはJavaScriptで設定します。

各セクション要素に、そのセクションのZ方向の最初の位置を、独自のdata-z属性に設定しておきます。

CSSで、.baseを画面の中心に置き、fixedにします。

ポイントは、perspective: 1px; の所です。

これは、Z方向の奥行きを指定するプロパティのようですが、
1pxを指定する事で、基準の位置(最初の位置)から、手前に向かって画面から消え去るまでの距離が、1pxという事になります。
HTMLで作成したdata-z属性の値は、このperspectiveの値を基準にしていますので、
例えばdata-z=”5″であれば、基準の .base の位置から、5px奥に配置するという意味になっています。

後は、.scalerの transform: translateZ() の値を、スクロール値を元に変更していけば、奥に進むページが作れます。

(擬似的に)段階的に奥に進むページ

スルスルと奥に進んでいくのはシンプルで気持ちいいですが、若干素っ気ない気もします。

かと言ってスクロール動作をジャックするような事もやりたくありません。(個人的に嫌いですし、一般的にも嫌われているという認識です。)

では、スクロールイベントの処理を少し修正して、
.scalerのtranslateZ()の値を、5px単位で更新してみてはどうでしょうか。

これで、.scalerのZ軸が5px単位で動くようになりました。

この状態で、CSSで.scalerにtransitionを追加すれば、良い感じになりそうです。

できました。サンプルはこちらです。

サンプル

ナビゲーションをつける

こういうページの場合、ナビゲーションをつける場合が多いかもしれません。

これは実は難しくなく、普段使っているスムーススクロールのスクリプトを少し書き換えるだけで済みます。
animateの行き先(scrollTop)を、目的のセクションのdata-zの値を元に指定するだけです。

サンプルはこちらです。

サンプル

Z軸の角度を変える

CSSで、.baseにperspective-origin を追加すると、Z軸の基準点を変える事ができます。

試しに、perspective-origin: bottom; とすると、地を這うようにコンテンツが奥から現れます。

サンプル

perspective-originの値は、数値の指定もできます。

perspective-origin: center bottom -150px; とすれば、少し下からコンテンツが現れるように見せることができます。

サンプル

 

基本的にはこんな感じです。

各コードサンプルは、サンプルファイルからの抜粋ですので、
具体的なコードはサンプルファイルを参照してみてください。

perspectiveの値を変えてみたり、それに合わせてJSのスクロール値の計算方法を変えてみたりすれば、スクロール感は色々調節できるかと思います。

さらに、CSSを弄くったりスクロール値によってクラスを切り替えてtransrofmしたりすれば、色々と面白い演出ができそうです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です