パララックスページを作成するときは、いつもJqueryを駆使して実現していたのですが、今回はCSS2で実装されていたclipプロパティを使ってシンプルな実装で作成してみました。
clipプロパティとは？
ものすごくざっくり言うと、“HTMLとCSSだけでクリッピングを行うためのキーワード” です。諸説違いはありますがトリミングといった方が解りやすいでしょうか？それらの違いやclipプロパティの使い方については既にたくさんの情報が発信されていますので、世の中のエンジニアの方達に感謝をしつつ、ここではあへて説明はしていません。使い方が解らない、clipって何？という方は、まずこの記事でどんな事ができるのかを確認した後に使い方や構文について調べてみて下さい。
結局clipプロパティ使って何ができたの？
まずはデモページを確認してみて下さい。
スクロールさせると画面中央に配置した要素の色とテキストがScene1から順に２、３、４と切り替わっているかと思います。これだけだとパララックスの効果が伝わりづらいと思うので、ちょっとデザイナーっぽくデザインを充ててみたのがこちらです。
おしゃれ度一気にあがりましたね。さすがデザイナーですね。。。我ながら。
写真ギャラリーなんかはモーダルで表示させることがポピュラーかと思いますが、ページ送りが若干面倒だなと思っていたのでこう言った見せ方が簡単に実装できれば表現の幅も広がって作り手側からの提案もどんどんしやすくなりますね。
何をしている？
何をしているか簡単に説明すると、トリミングする領域を局所的ではなく画面全部をトリミングさせています。ソース見てもらった方が解りやすいかと思います。
<body>
<div class="container"> <!-- Scene1 -->
<div class="container-inner">
<div class="pin-wrapper bgImg01">
<div class="img">
<h2>I protect you in my life.</h2>
</div>
</div>
</div>
</div>
<div class="container"><!-- Scene2 -->
<div class="container-inner">
<div class="pin-wrapper bgImg02">
<div class="img">
<h2>I’m always here for you.</h2>
</div>
</div>
</div>
</div>
・
・
・
</body>
単純に’.container-inner’がついた要素で前のシーンをクリッピングしているだけです。
今回のケースだとScene2にある’.container-inner’が、Scene１をクリッピングしています。
.container {
width: 100%;
position: relative;
}
.container-inner {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
clip: rect(auto, auto, auto, auto);
}
.pin-wrapper {
position: fixed;
width:100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate( -50% , -50%);
}
.img {
position: absolute;
width:500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate( -50% , -50%);
display: flex;
align-items: center;
justify-content: center;
}
ポイントはHTMLの構造とclipプロパティをどの要素に指定するかだと思います。このプロパティはposition:absoluteとposition:relative を持った要素にしか適用されないそうです。初めて知りました。。
まとめ
パララックスについてはスクロールイベントやテキストのアニメーションを効果的に付け加える等していくことでかなりリッチな印象を与えることができるため積極的に提案していきたい表現方法ではありますが、それなりに時間、センス、技術、提案方法と色々な能力を要するという問題があると思います。とはいえあんまり考えすぎると何も提案できなくなってしまいますので、いかにシンプルな実装方法でより印象に残る方法を実現するかということを改めて考えてみるのも良いかもしれませんね。
あと、z−indexを指定するだけでできるんじゃないか？？と思った方は一度スタックコンテキストとスタックレベルについて学んでみると良いかと思います。
と言うことで全くまとまってないですがclipプロパティ皆さんも是非試してみてはいかがでしょうか。
次は今回作ったページにテキストのアニメーションをつけて遊んでみたいと思います。お楽しみに〜。