パララックスとは?
パララックスとは『視差効果(しさこうか)|(Parallax Effect)』のこと。スクロールした時に画面の動き方をずらすことで、奥行きのあるページ仕上げることができるデザインの手法です。
welikesmall.com
![](https://eguweb.jp/wp-content/uploads/20190708210653-1024x759.jpg)
凄すぎてどうやって実装しているのかサッパリですが、このような視差効果がパララックスサイトです。
bouguessa.com
![](https://cdn.shopify.com/s/files/1/1320/6057/files/logo-bouguessa.png?height=628&pad_color=ffffff&v=1613712243&width=1200)
![](https://eguweb.jp/wp-content/uploads/20190708210828-1024x692.jpg)
ということで、制作開始。
![](https://eguweb.jp/wp-content/uploads/20190708214501-1024x558.jpg)
まずは上記のようなHTMLファイルを準備します。
パララックスのCSS
次に、パララックスのcssファイルを準備します。
(style.css)
![](https://eguweb.jp/wp-content/uploads/20190708213052.jpg)
![](https://eguweb.jp/wp-content/uploads/20190708215806.jpg)
まずは、style.cssのbody,htmlにheight:100%を指定します。
※height:100%を指定しないと要素が画面の高さ100%にならないため、class=”parallax”で指定した背景部分が表示されなくなります。
次に、parallaxクラスに下記のような指定をします。
![](https://eguweb.jp/wp-content/uploads/20190708222936.jpg)
position: relative
position: relativeで相対位置への配置をします。
background-attachment: fixed
background-attachment: fixedにしておくことで、背景位置を固定します。
![](https://eguweb.jp/wp-content/uploads/20190708222200-1.jpg)
background-attachment: fixedを入れないと、背景部分が固定されないため、スクロールした時に、背景が終わってしまいます。
![](https://eguweb.jp/wp-content/uploads/20190708222357-1.jpg)
あとは、それぞれのコンテンツ要素に高さや余白を指定してあげると、なんとなくパララックスっぽい感じになるかと思います。
※今回の場合は、position:relativeやz-indexは、消しても位置は変わらないかと思います。
![](https://eguweb.jp/wp-content/uploads/20190708224453.jpg)
![](https://eguweb.jp/wp-content/uploads/20190708224558.jpg)
まとめ
例えば、marginを0にすると、上下の余白が消えて、詰まったような感じになるかと思います。何を消したらどう変わるのか、色々とお試し頂ければと思います。(^o^)