ヘッダー画像に３Ｄパララックス効果を設定する方法【AFFINGER6】

ヘッダー画像に３Dパララックス効果を設定する方法が知りたい！

お調べさん

ゆめただ

そんなお悩みを解決します！

AFFINGER6で、ヘッダー画像のスクロール速度を変えて、奥行きを感じる３Dパララックス効果についてまとめました。

スクロールしている速度より、ヘッダ画像のスクロール速度を遅くすると、3Dっぽく感じる効果です。

＼このサイトと同じ方法で１枚のヘッダー画像に設定します／

この記事を書いた人【ゆめただ】

本記事を音声で。

忙しいあなたへ

本記事【ヘッダー画像に３Ｄパララックス効果を設定する方法【AFFINGER6】】を

音声で聴けます。

再生時間は「２分５６秒」です。

【完成イメージ】ヘッダー画像３Ｄパララックス効果

ヘッダー画像に３Dパララックス効果を設定したデザイン例です。

＼完成イメージはこちら／

３Dパララックス効果をどう実現するか？

ヘッダ画像のスクロール速度を変えて３D効果を得る考え方です。

ヘッダー画像のスクロール速度を、ヘッダーコンテンツのスクロール速度よりも遅くします。

すると、脳は手前のヘッダーコンテンツよりも、後ろのヘッダー画像のスクロール量が少ないので

ヘッダーコンテンツよりもヘッダー画像が奥にあると錯覚します。

これで、３Dパララックス効果を得ることができます。

３Dパララックス効果を得る具体的な方法

AFFINGER管理画面に移動する

「その他」をクリックします。

コードを追加する

「上級者向け」の「</>コードの出力」にコードを追加します。

headに出力するコードのところにコードを追加します。

トップのスクロール位置に対して、バックグランドの位置を、１／２（0.5）にするよ。

というコードを追記します。

<script>
$(window).on('scroll', function(){

  var scrollTop = $(window).scrollTop();
  var bgPosition = scrollTop / 2 ; 

  if(bgPosition >= 0){
    $('#header-full').css('background-position', 'center top -'+ bgPosition + 'px');
  }

});
</script>

これで完成です。

ゆめただ

ヘッダー画像に３Ｄパララックス効果を設定する方法をまとめました。

これであなたのトップページをオシャレに差別化しましょう！

＼こちらの記事も要チェック／