AFFINGER   ※当サイトのコンテンツには広告が含まれる場合があります。

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

2024-05-26 yume-tada

3D-parallax-effect-on-image

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

findout
お調べさん
ゆめただのり
ゆめただ

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

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

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

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

究極のヘッダー3Dパッラックス効果サイト
Campo Santo - Firewatch
【必見】ゆめただおすすめ:ヘッダー3Dパララックス効果サイト!

www.firewatchgame.com

本記事でわかるコト

 AFFINGER6で、ヘッダー画像に3Dパララックス効果を設定する方法

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

この記事を書いた人

忙しいあなたへ

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

音声で聴けます

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

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

\完成イメージはこちら/

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

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

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

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

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

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

3D-effect-explanation

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

AFFINGER管理画面に移動する

管理画面

【AFFINGER管理】-【AFFINGER管理】

 管理画面の「AFFINGER管理」ー「AFFINGER管理」をクリックします。

3D_parallax_effect_1

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

3D_parallax_effect_2

コードを追加する

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

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

3D_parallax_effect_3

トップのスクロール位置に対して、バックグランドの位置を、1/2(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>

これで完成です。

ゆめただのり
ゆめただ

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

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

作業を行う前に

本記事の内容を試す場合は、バックアップを必ず取ってから、記事ページを見ながら作業を行ってください。

自己責任でお願いいたします。

\こちらの記事も要チェック/

こちらもチェック

how-to-customize-affinger-top-page
AFFINGER6トップページのカスタマイズ方法【オシャレに差別化】

続きを見る

こちらもチェック

reason-why-I-recommended-affinger_new2
AFFINGER6(アフィンガー6)を初心者におすすめする5つの理由【後悔しないテーマ選び】

続きを見る

-AFFINGER