こんにちは、制作担当のI.Sです。
今回はパララックスと呼ばれる、あたかも奥行きがあるような、視差効果をもった手法を紹介します。
目次
1.実装例
2.解説
3.カスタマイズ
4.まとめ
1.実装例
See the Pen
B パララックス by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
※右下の「Rerun」で何度も再生できます。
よく各コンテンツの合間に使われるかと思います。名前は聞いたことはなくても、実装例を見てピンときたのではないでしょうか。
難しそうに見えるかもしれませんが、案外簡単に実装することができます。
2.解説
それではCSSでどのように制御しているのか、解説していきます。
背景を固定させる記述
解説…といいつつも一言で説明がついてしまいます。
背景画像を指定した要素の中に、「background-attachment: fixed;」を
入れるだけで、実装完了になります。
ではまた….
…というわけにはいかないのでもう少しだけ説明すると、
background-attachment は背景の固定と移動を指定できます。
ヘッダーを固定するように、「fixed」を入力すれば背景固定できてしまう、というわけです。
divの内容はほとんどテキストの記述ですので、割愛。
スクロールコンテンツの記述
今回は分かりやすいように背景色を入れていますが、実際にはテキストやコンテンツが入るかと思います。
正直ここの部分は、状況によって変化しますので、特に気にする必要はありません。
3.カスタマイズ
たった一行の記述で済んでしまう為、誰でも簡単に実装できると思います。
カスタマイズもしやすいので、他の表示例をみていきましょう。
パターン1
See the Pen
B パララックス 2 by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
背景とコンテンツをhtml内で入れ替えるだけで、作成できます。
かなり容易にできた割には、印象が大分異なるのではないでしょうか。
個人的にはこちらのパターンの方がよく見かけると思います。
パターン2
See the Pen
B パララックス 3 by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
こちらは背景を連続させたパララックスになります。
かなり海外チックになりましたし、オシャレですね。
4.まとめ
cssのみで表示しているので、とても簡単に実装できることがメリットだと思います。また、一部分にパララックス効果を試用するだけで、かなり見た目が変化します。カスタマイズ性も高いので、今後ともお世話になるテクニックの一つではないでしょうか。
本当にではまた.
