エグウェブ.JP@福岡/WEBセミナー・分析・WEBサイト制作

福岡でWEB分析・ホームページ・WEBサイト作成・WordPress、Googleアナリティクス、LINEスタンプ、Photshop・illustrator、Excelの講座やセミナーを開催

【CSS入門】パララックスサイトを作ってみる!|準備編

time 2019/07/08

パララックスとは?

パララックスとは『視差効果(しさこうか)|(Parallax Effect)』のこと。
スクロールした時に画面の動き方をずらすことで、奥行きのあるページ仕上げることができるデザインの手法です。

welikesmall.com

https://www.welikesmall.com/

凄すぎてどうやって実装しているのかサッパリですが、このような視差効果がパララックスサイトです。

bouguessa.com

https://bouguessa.com/

ということで、制作開始。

まずは上記のようなHTMLファイルを準備します。

パララックスのCSS

次に、パララックスのcssファイルを準備します。
(style.css)

まずは、style.cssのbody,htmlにheight:100%を指定します。
※height:100%を指定しないと要素が画面の高さ100%にならないため、class=”parallax”で指定した背景部分が表示されなくなります。

次に、parallaxクラスに下記のような指定をします。

position: relative

position: relativeで相対位置への配置をします。

background-attachment: fixed

background-attachment: fixedにしておくことで、背景位置を固定します。

http://parallax.eguweb.jp/01/

background-attachment: fixedを入れないと、背景部分が固定されないため、スクロールした時に、背景が終わってしまいます。

http://parallax.eguweb.jp/01/01_2

あとは、それぞれのコンテンツ要素に高さや余白を指定してあげると、なんとなくパララックスっぽい感じになるかと思います。
※今回の場合は、position:relativeやz-indexは、消しても位置は変わらないかと思います。

まとめ

例えば、marginを0にすると、上下の余白が消えて、詰まったような感じになるかと思います。何を消したらどう変わるのか、色々とお試し頂ければと思います。(^o^)/

デモサイトはこちら

http://parallax.eguweb.jp/01/

download

プロフィール

EGUWEB

EGUWEB

【皆さまの人生に最良のファーストステップを】WEBサイトを作りたい!WEB分析を学びたいけど分からない。とりあえず色々と知りたい!皆様の悩みを解決できるように頑張ります。 [詳細]

カテゴリー