ガジェットとWebデザインの備忘録

  1. CSS

CSSのみでパララックス風に試みた。

なかの(@nkn12104)です。

CSSで簡単にパララックス風にできるので備忘録として書いていきます。

スポンサード・リンク

CSSのみでパララックス風にしてみる

→position:sticky;でイケる!

ということで、こちらにサンプルを作成しましたのでご確認ください。

下にコードも置いてますので合わせてご確認ください。


主要部分のHTML(抜粋)

 

ここではsectionで囲ってますが普通にdivでも大丈夫です。
サイト見合いによってそこは変えてください。

CSS部分

 .block {
        margin: 0 auto;    
        display: flex; 
      align-items: center;
     justify-content: center;
     position: -webkkit- sticky;
     position: sticky;
     top: 0;
   }

この部分が今回のポイントです。

各sectionに共通のclassを付与した上でposition: sticky;をつけていきます。

.block-one {
z-index: 100;
}

また、各sectionごとに画像が重なるようにz-indexで順番つけていきます。

そうすると簡単にパララックス風(というよりもカードをシャッフルさせているっぽい?)になります。

当初Tsunashima Coffeeに実装しておりましたが、
ハンバーガーメニューを実装、アンカーで各セクションに飛ばそうところz-indexの影響?
によって上部メニューは飛ぶものの、下部メニューに飛ばせないといった事象があったため、
実装はせず、今後のサイト制作の参考になればと思い書き残した次第です。
ポートフォリオ作りの参考になればと思います。

参考にした記事

・たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方

スポンサード・リンク

CSSの最近記事

  1. (※超簡単)ポートフォリオに最適な画像をスライドできるJavaScriptを実装してみた。…

  2. CSSのみでパララックス風に試みた。

関連記事