質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1404閲覧

パララックスの背景遅延の処理内容が分からないので教えてください。

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/03/15 12:27

前提

ソースコードはこのサイトのコピペです

質問

  • scrollYStart1とscrollYStart2の値は-〇〇〇pxになると思います。これは要素のどの位置に相当しますか?
  • css:background-position-y部分の処理内容を理解できている気がしません。どのような処理なのか教えてください

該当のソースコード

HTML

1<div class="wrap"> 2 <div class="parallax bg-01" id="parallax-01">背面:パララックスエリア 3 </div> 4 <div class="content">前面:コンテンツエリア 5 </div> 6 <div class="parallax bg-02" id="parallax-02">背面:パララックスエリア 7 </div> 8 <div class="content">前面:コンテンツエリア 9 </div> 10</div>

JavaScript

1$(function(){ 2 var target1 = $("#parallax-01"); 3 var targetPosOT1 = target1.offset().top; 4 var target2 = $("#parallax-02"); 5 var targetPosOT2 = target2.offset().top; 6 var targetFactor = 0.5; 7 var windowH = $(window).height(); 8 var scrollYStart1 = targetPosOT1 - windowH; // ここです 9 var scrollYStart2 = targetPosOT2 - windowH; 10 $(window).on('scroll',function(){ 11 var scrollY = $(this).scrollTop(); 12 if(scrollY > scrollYStart1){ 13 target1.css('background-position-y', (scrollY - targetPosOT1) * targetFactor + 'px'); // ここです 14 }else{ 15 target1.css('background-position','center top'); 16 } 17 if(scrollY > scrollYStart2){ 18 target2.css('background-position-y', (scrollY - targetPosOT2) * targetFactor + 'px'); 19 }else{ 20 target2.css('background-position','center top'); 21 } 22 }); 23});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2020/03/16 08:37

「scrollYStart1とscrollYStart2の値は-〇〇〇pxになると思います。」とのことですが、当方の環境で試したところ、-221、323でした。
退会済みユーザー

退会済みユーザー

2020/03/19 12:27

scrollYStart1の値しか確認していませんでした。両方確認してみます。
guest

回答1

0

ベストアンサー

scrollYStart1とscrollYStart2の値は-〇〇〇pxになると思います。これは要素のどの位置に相当しますか?

その後にif(scrollY > scrollYStart1){というコードがあります。
ここに、scrollYStart1 = targetPosOT1 - windowHを代入すると、
scrollY > targetPosOT1 - windowH
つまり、
scrollY + windowH > targetPosOT1
です。
これを言葉で表すと、「現在のスクロール量 + ウィンドウ高さ > ターゲットの上端」ということです。
たとえば、ターゲットの上端が500、ウィンドウ高さが400だとすると、現在のスクロール量が100を超えると条件成立、ということです。


css:background-position-y部分の処理内容を理解できている気がしません。どのような処理なのか教えてください

背景画像が通常どおりに配置されている、つまり(scrollY - targetPosOT1) * targetFactorが0になる時は、scrollY = targetPosOT1の時、つまり、現在のスクロール量がターゲットの上端と等しい時、すなわち、ターゲットの上端がスクリーン上端に接しているときです。
これよりスクロール量が少ない、つまり、ターゲットの上端がスクリーン上端に達していない時、(scrollY - targetPosOT1) * targetFactorは負になりますから、background-position-yが負になります。これは、背景画像が上に見切れる、ということです。
これよりスクロール量が多い、つまり、ターゲットの上端がスクリーン上端の上に隠れているとき時は、同様の理屈で背景画像が下に見切れる、ということです。

スクロールしてスクリーンに入ってきた時、背景画像が上に見切れていて、スクロールさせていくと下に見切れていく、ということは、スクリーンから見ると背景画像がスクロールに追いつかれて追い抜かれているように見えます。つまり、スクロールに対して視差効果を表現しているということです。

なお、targetFactorの意味はコピペ元のページに書いてある通りです。

投稿2020/03/16 09:34

Lhankor_Mhy

総合スコア35860

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/03/19 12:26

ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問