パララックス効果?及びその実装の流れについて

現在、RINN.Incという以下のサイトを模写しているのですが、
リンク内容

少しスクロールした後に出てくるMEOW　という文字や、一番下あたりで、
MADE FOR CATS,　DESIGNED FOR YOU.という文字がスクロールすると急に浮かび上がってくるのですが、これはパララックス効果という認識であっていますでしょうか？

そして、これを実装していく際には、StickyStack.jsといったプラグイン等を使うのが普通なのでしょうか。それとも普通にjqueryで実装していくのが筋なのでしょうか。

実際にコードを書いていく前の確認として質問をさせていただきました。
詳しい方、どうかよろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

パララックスの厳密な定義は知らないですが、スクロール量に応じて要素の位置を変化させているという意味ではパララックスといっていいと思います。

プラグインも探せばいろいろ見つかると思いますが、スクロールイベントでスクロール量に応じて要素の位置を移動させているだけの処理なので、自前で実装してもいいと思います。
プラグインをダウンロードしてドキュメントを読んで使い方を理解してとやるぐらいなら、自前で実装した方か早いように思います。

例えば、下記辺りを参考にすればどうでしょうか。

プラグイン不要の基本的なパララックス効果をサイトに実装する | オウンドメディア

【jQuery】パララックスデザインの作り方 - 株式会社ネディア │ネットワークの明日を創る。

リンク先のページの最後までスクロールしたときに、ページエンドに固定したブロック（MADE FOR CATS,DESIGNED FOR YOU.の部分）が現れるサンプル。

コメントで軽く解説しておきましたので参考にしてください。

html
1<div class="scrollcontents">
2  <div class="contents">
3    <h1>下にスクロールしてください。</h1>
4  </div>
5</div>
6
7<div class="pageend">
8  <div class="pageend-body">
9    <div class="pageend-inner">
10      <p>Made for Cats,<br>Designed for You.</p>
11    </div>
12  </div>
13</div>

css
1* {
2  outline: none;
3  box-sizing: border-box;
4  margin: 0;
5}
6.scrollcontents {
7  position: relative;
8  z-index: 1;  /* .pageendより前面に配置 */
9  background-color: #fff;
10  width: 100%;
11}
12.contents {
13  /* スクロールさせるために適当に高さを設定 
14  　　本来はいろいろコンテンツが入ります。 */
15  overflow: hidden;
16  height: 3000px;
17}
18.contents h1 {
19  margin-top: 100px;
20}
21
22.pageend {
23  z-index: 0; /* .scrollcontentsより背面に配置 */
24  height: 480px
25}
26
27.pageend-body {
28  /* ページエンドブロックを画面サイズと同じにして
29  　　画面に固定表示 */
30  position: fixed;
31  left: 0;
32  bottom: 0;
33  width: 100%;
34  overflow: hidden;
35  height: 100vh;
36  background: #222;
37  color: #fff;
38  display: flex;
39  align-items: flex-end; /* 子要素を下揃え */
40}
41
42.pageend-inner {
43  width: 100%;
44  height: 480px
45}
46
47.pageend-inner { /* 子要素の上下左右中央寄せ */
48  display: flex;
49  align-items: center;
50  justify-content: center;
51  text-align: center;
52}
53
54.pageend p {
55  letter-spacing: 3px;
56  font-size: 18px;
57  color: #fff;
58}

投稿2020/10/14 06:03

総合スコア33782

2020/10/14 06:16

ありがとうございます　自分で実装する方針で行きたいと思います! ちなみになのですが、サイト下の部分のMADE FOR CATS, DESIGNED FOR YOU.という文字が急に浮かんでくる仕組みが、紹介していただいたサイトではいまいち意味がつかめられていないので、申し訳ないのですが、説明をお願いしたいです…。「Z-indexで文字の方を上にして、この文字をjsであらかじめ設置しておく…？」といった感じで混乱しています

hatena19

2020/10/14 06:29

検証ツールでみてみると、そこは position: fixed; で画面に固定配置してるだけですね。その部分はjsは使ってません。

tosa123

2020/10/14 06:52

Position:fixed;で固定させて、bottomからの位置を指定して、その後、黒の部分よりz-indexを高くすればいいのでしょうか？

hatena19

2020/10/14 06:58 編集

検証ツールの使い方は分かってますか。それを使ってまずはそのサイトのコードがどのようになっているか確認すればいろいろ見えてくると思います。その部分は、div.pageend-body で、 position: fixed; left: 0; bottom: 0; width: 100%; overflow: hidden; height: 100vh; と設定していると分かります。つまり画面サイズ一杯で固定させているということです。その上の div.scrollcontents をjsを使ってスクロールに応じて transform で移動させてますね。

tosa123

2020/10/14 07:27

デベロッパーツールは見てみたところ、divタグがいっぱい並ぶだけで何がなんだかよくわかりません…。

tosa123

2020/10/14 08:49

とりあえずもう少し自分でやってみることにします

tosa123

2020/10/17 08:36

デベロッパーツールを元にコードの仕組みを理解しようとしましたが、全体的によくわからないままです。具体的にどこがわからないかを言語化して質問をしたいのですが、ほんとに全体的によくわからないとしか言いようがない程混乱しています。

hatena19

2020/10/17 08:47

とりあえず提示したリンク先を参考にできるところまでやってみて、できたところまでのHTML、CSSコードを提示して、どこがうまくいかないかピンポイントにしぼって質問しなおした方がいいでしょう。現状ではほぼサイト制作依頼になってます。

tosa123

2020/10/17 12:16

了解しました。もうすこし粘ってみます。

tosa123

2020/10/17 12:26

もうしわけないのですが、リンク先に加えて、もう少しヒントを教えてくださらないでしょうか。教えてくださった二つのリンクを参考に作成しようとしたのですが、それらのどの部分を参考に応用できれば、MADE FOR CATS,DESIGNED FOR YOU.の部分を表現できるかのイメージを沸かせられていないというのが正直なところです。

hatena19

2020/10/17 14:13

回答にサンプルを追加しましたので、ご参照ください。

tosa123

2020/10/18 06:23

positionプロパティの relative とfixed　に関してもう一度復習して理解を深められれば、仕組みを理解できそうです。丁寧に質問にお付き合いくださり、ありがとうございました。

行動規範の内容に同意します